1.常用居中方法
居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：
<div class="parent">
<div class="child"></div>
</div>
水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
经我验证无论是行内元素还是块级元素，父元素不需要设置高度，使用padding设置一个值，就可以垂直居中
另外，使用position和transform（ IE8 及更早版本不支持 transform 属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid red;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>
div和css：行内元素和块元素的水平和垂直居中
行内元素：
水平居中：text-align:center
ul水平居中:加
display:table;
margin:0 auto;
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
垂直居中：line-height:父元素的height
块元素：
水平居中：
①margin:0 auto
例：
.father{
width:200px;
height:200px;
background-color:red;
}
.son{
width:100px;
height:100px;
background-color:black;
margin:0 auto;
}
0指上下外边距为0，auto指左右外边距自适应，此时水平居中。（该方法不适用于垂直居中） 这种方法不适用于通屏，即若子元素溢出，则在父元素中不居中（只适用于定宽的块状元素）
②position:relative/absolute/fixed
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.test1 {
position:relative;
/*position:relative/absolute/fixed*/
width: 200px;
height: 100px;
background-color: green;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="test1">
</div>
</body>
</html>
relative:相对定位，保留初始位置（即不浮动）
特点：1.不影响元素本身特性
2.不使元素脱离文档流（不浮动）
3.可以不设定偏移量，此时位置不会发生变化
4.该元素是相对于自己本身位置的偏移量。
absolute:绝对定位，不保留初始位置
特点： 1.元素完全脱离文档流（浮动）
2.使内联元素支持宽和高
3.让块标签内容撑开宽高
4.相对父元素偏移，且逐层查找，直到document，若父元素没有position:relative属性，则继续向上找，直到document,即相对于浏览器左上角。
5.提升层级，即盖在其他未用该属性的元素上，或者在他之前使用该属性的元素上。（优先级可以用z-index设置，值越大，优先级越高，但是若父元素，即使用position:relative的元素也被覆盖，则没有用）
fixed:相对于视窗定位，即不管滑轮向下还是向上拉，该元素位置始终不变。（IE6以下不兼容）
<style>
.test{
width:200px;
height:100px;
background-color:yellow;
}
.test1{
width:200px;
height:100px;
background-color:green;
position:relative;
left:50%;
margin-left:-100px; <!--子元素的height的一半-->
}
.test2{
width:200px;
height:100px;
background-color:blue;
}
.test3{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="test">
</div>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>
(插不了图片。。。我口述吧。。) 就是保留了图片本来的的位置，而图片移动到了屏幕中央的位置。 若将上面test2的position改为absolute，则浮动，图片2本来的位置被test3覆盖 用上面position，left，margin-left三个属性也可以使div水平居中（垂直居中将left改为top即可） 这种方法适用于通屏，即若子元素溢出，则在父元素中也居中。
优点：不用知道父元素的width
垂直居中：
①设置父元素的padding
缺点：需要知道父元素的width值
②上述水平方法第二个，将left改为top
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.test1 {
position:relative;
/*position:relative/absolute/fixed*/
width: 100px;
height: 100px;
background-color: green;
top: 50%;
margin-top: -50px;
}
.container{
margin: 0;
padding: 0;
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="test1">test1</div>
</div>
</body>
</html>
③绝对居中（即水平，垂直都居中）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.son{
position: absolute;
margin: auto;
top: 0;
bottom:0;
left: 0;
right: 0;
width:200px;
height:100px;
border: 1px solid red;
}
.father{
position: relative;
width: 1000px;
height: 1000px;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
实现方法：父元素相对定位，子元素绝对定位，在子元素中添加属性
{
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}
该方法不浮动，但也存在不通屏的问题。
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
