【水平居中】
1、对于行内元素，将其包裹在display:block的父级元素中，为父级元素添加 text-align:center;
2、对于块状元素，左右外边距为auto即： margin:10px auto; 其中10px指的是上下外边距为10像素。
3、对于多个块状元素，将元素display设为inline-block，并且父元素的text-align设置为center
<body>
<div class="center">div1</div>
<div class="center">div2</div>
</body>
css:
.center{
display:inline-block;
}
body{
text-align:center
}
4、多个块状元素，使用flexbox布局
只需要把块状元素的父元素添加 display:flex; justify-content:center;
如下:
<body>
<div class="center">div1</div>
<div class="center">div2</div>
</body>
body{
display: flex;
justify-content: center;
}
【垂直居中】
1、行内元素，将height, line-height同时设置为父元素的高度
<div id="container">
<a href="#">hello</a>
</div>
#container{
background: #222;
height:200px;
}
a{
height:200px;
line-height:200px;
color:#fff;
}
2、多行的行内元素
组合使用display:table-cell vertical-align:middle来 定义需要居中元素的父容器
<div id="container">
<a href="#">hello，here are many words,more than one line...hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </a>
</div>
.container{
background:#ccc;
width:300px;
height:300px;
/*以下属性垂直居中*/
display: table-cell;
vertical-align:middle;
}
a{ color:#fff;}
3、已知高度的块状元素
使用top：50%;然后margin-top回退元素本身高度的一半
<div class="item"></div>
div{
width:100px;
height:100px;
background:#222;
}
.item{
top:50%;
margin-top: -50px;/*为元素本身100px的一半，这里是负值*/
position:absolute;
padding:0;
}
4、未知高度的块状元素
仍然先使用top:50%，但是这里高度未知，所以用css3的transform属性垂直移动
<div class="item">hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </div>
div{
width:100px;
background:#222;
color:#fff;
}
.item{
top:50%;
position:absolute;
transform:translateY(-50%);
}
【水平垂直居中】
1、已知高度宽度的元素
原理和上面涉及的一样，定位absolute，top和left为50%，然后margin-top和margin-left为元素本身高度一半，并且是负值
<div class="item"></div>
.div{
width:100px;
height:100px;
background:#222;
color:#fff;
}
.item{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
2、未知宽高度的元素
使用transform
<div class="item">hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </div>
div{
background:#222;
color:#fff;
}
.item{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
3、使用flex布局
<div class="parent">
<div class="item"></div>
</div>
.item{
background:#222;
color:#fff;
width:100px;
height:100px;
}
.parent{
display:flex;
justify-content:center;
align-items:center;
/*这里要设置高度来查看出垂直居中的效果*/
background:#aaa;
height:300px;
}
补充：
关于flex布局，弹性盒子布局。声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items.常结合使用的属性有 dispaly:flex; flex-flow:row; 或者flex-flow:column;
思考：这里也可以利用flex布局来实现一列固定一列自适应的布局吧（详情见本blog另一篇博文）：
<div class="parent">
<div class="stable"></div>
<div class="change"></div>
</div>
.parent{
width:800px;
border:1px solid #222;
dispaly:flex;
flex-flow:row;
}
.stable{
width:200px;
border:1px solid #ccc;
}
.change{
border:1px solid #ddd;
}
关于transform属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。
示例写法：
transform:translate(20px);
transform:scaleY(3);
transform:rotateY(10deg);
等等，详情参考W3School 参考资料： 极客标签水平垂直解决方案
转载请注明原文地址: https://ju.6miu.com/read-1294068.html
