主要记录自己日常积累的布局相关的东西，持续更新中。

1.登录框上下左右自适应居中

以前想要把登录表单始终放置在页面的中间，花了不少心思，一直以来用的解决方法都是用js，感觉有点麻烦不是很好，于是在网上查询了一下发现了一种比较的实现方法。

原理就是用position:absolute,然后用left：50%，top：50%，现在登录表单左侧直角是在页面的中间了，但是登录框本身还有宽度和高度，所以我们再用margin-left:-登录框宽度，margin-top：-登录框高度，就可以让登录框显示在页面的正中间了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

	<title>登录框自适应居中</title>

	<style>

	#LoginContainer {

		position: absolute;

		width:400px;

		height:200px;

		left:50%;

		top:50%;

		margin-left:-200px;

		margin-top:-100px;

		border:1px solid #ccc;

	}

	</style>

</head>

<body>

	<div id="LoginContainer">

	这是登录框

	</div>

</body>

</html>

　　

很多问题的解决方法都不止一种，还是要多学习多交流啊。

2.左右布局，左侧固定宽度，右侧自适应宽度

原理就是左侧div固定宽度+float，然后右侧的div设置左间隔左侧div宽度的距离就可以了（margin-left:左侧div的宽度）

<style type="text/css">

    html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; }

    .container { height: 100%; border: 1px solid #ccc; min-width: 600px; }

        .container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; }

        .container .content { height: 100%; margin-left: 200px; }

</style>

<div class="container">

    <div class="west">west</div>

    <div class="content">content</div>

</div>

3.利用translate(-50%, -50%)居中(红色为关键部分)

　　position: fixed;
　　min-width: 100px;
　　color: #fff;
　　border-radius: 2px;
　　background-color: rgba(0, 0, 0, 0.6);
　　padding: 10px 5px;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　text-align: center;

css+div上下左右自适应居中的更多相关文章

  1. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  2. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  3. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  4. CSS DIV中表格居中显示

    将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; widt ...

  5. html分页自适应居中；css设置分页自适应居中

    制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...

  6. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

  7. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  8. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. 【python基础语法】第3天作业练习题

    ''' .将给定字符串的PHP替换为Python best_language = "PHP is the best programming language in the world! &q ...

  2. linq to sql 比较字符串形式的时间

    where Convert.ToDateTime(t.Date.Trim()).CompareTo(Convert.ToDateTime("2009/9/9")) >= 0 ...

  3. Tomcat中使用JNDI配置各种数据源

    最近接手了一个离职同事的老项目,全是XML配的,看的我贼难受,不过了解下配置原理还是有好处的 1.MySql <Resource name ="cockpitTest" au ...

  4. fqa0

    FQA 0 - Plan 9 简介 0.1 - 什么是 Plan 9 Plan 9 是一个研究操作系统,来自于在 Bell 实验室计算机科学研究中心(CSRC)同样创造了 UNIX 的团队.它出现在2 ...

  5. SEO中10个常用的查询指令

    用好搜索引擎一些特别指令,是干SEO这行的一个根本功.初步收拾了10个功能,独自使用是最基础的才能,假如综合应用,你会发现搜索的奇妙无限. 1. site: 某个特定网站收录情况 site:www.c ...

  6. jQuery Moblie 问题汇总

    1  使用jQuery动态添加html,没有jQuery Moblie的样式 $("body").html(listview);//以上代码只是把结构加上去了,但是却没有加上jqm ...

  7. [Python]爬取首都之窗百姓信件网址id python 2020.2.13

    经人提醒忘记发网址id的爬取过程了, http://www.beijing.gov.cn/hudong/hdjl/com.web.consult.consultDetail.flow?original ...

  8. Spring Batch 批处理原则与建议

    Spring Batch 批处理原则与建议 当我们构建一个批处理的过程时,必须注意以下原则: 通常情况下,批处理的过程对系统和架构的设计要够要求比较高,因此尽可能的使用通用架构来处理批量数据处理,降低 ...

  9. Socket之TCP-IP

    通常的TCP/IP流程如下: TCP/IP的通讯更像是打电话,连接上通了确认是自己拨叫的用户之后才能进行正常通话,更加安全合理. Qt中的TCP/IP流程如下: Qt中流程和普通的思路一样,只是封装成 ...

  10. 使用ResXmanager实现多语言[转]

    1 多國語系 - 使用RESXMANAGER管理資源檔 1.1 前言 在實作多國語系網站時,針對靜態文字多會使用資源檔(Resource)來對應出各語系所需顯示的內容.由於資源檔可能會依照特定結構放式 ...