css-水平和垂直布局
1.元素的水平居中？垂直居中？水平垂直居中？
水平居中
1.如果需要居中的是常规流中inline元素—图片，按钮，文字等行内元素(display为inline或inline-block等)
则在 父元素 中使用text-align: center;
<div class="content">
<span>a aa aspan>
div>
<style>
.content{
width: 500px;
border: 1px solid black;
text-align: center;
}
style>2.如果需要居中的是常规流中block元素—是常规流，对浮动元素或绝对定位元素无效。
或者是多个元素的水平排列，可以用flex或者是inline-bolck和text-align:center;
已经知道宽度：用margin
不知道宽度：1.display:inline-block,父元素text-align 2.flex布局
则需要为
1.元素设置宽度，
2.设置左右margin为auto，
3.IE6下需在父元素上设置text-align: center;再给子元素恢复需要的值
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
div>
body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
style>或者使用inline-block水平居中
仅inline-block属性是无法让元素水平居中，display:inline-block;
关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果
或者用flex布局
<div class="flex">
<div class="child ">
non-child
</div>
</div>
.flex{
width: 300px;
height: 200px;
border: 2px solid #ccc;
box-sizing: border-box;
display:flex;
flex-direction: row;
justify-content:center;
}
.child{
width: 100px;
height: 100px;
background: green;
box-sizing: border-box;
}3.如果需要居中的元素为浮动元素
则需要为：
1.为元素设置宽度
2.position: relative
3.浮动方向偏移量（left或者right）设置为50%
4.浮动方向上的margin设置为元素宽度一半乘以-1
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
div>
body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
style>4.如果需要居中的元素为浮动元素，但不知道浮动元素的宽度，则需要多一个包裹要居中的元素。
则需要为：
1.把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度
2.他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
<head>
<style>
body{
margin:0;
padding:0;
}
.parent{
width:300px;
height:200px;
border:1px solid red;
}
/*浮动居中的方法需要有这么一个包裹的元素，需要浮动的就是这个元素*/
.wraper{
float:left;//在这个包裹元素上浮动，让它自适应的宽度
position:relative;
left:50%;//相对定位到父元素宽度一半的地方
clear:both;
}
.child{
border:1px solid blue;//这个是真正需要居中的元素
position:relative;//在这个元素上进行相对定位
left:-50%;//向左偏移本身的一半宽度，正好就居中了
white-space:nowrap;
}
style>
head>
<body>
<div class="parent">
<div class="wraper">
<div class="child">我水平居中了div>
div>
<div class="wraper" style="margin-top:20px;">
<div class="child">宽度不同div>
div>
<div class="wraper" style="margin-top:20px;">
<div class="child">确实啊div>
div>
div>
body>5.如果需要居中的元素为绝对定位元素
则需要：
1.为元素设置宽度
2.偏移量设置为50%
3.偏移方向外边距设置为元素宽度一半乘以-1
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
div>
body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;/* 1 */
position: absolute;
left: 50%;/* 2 */
margin-left: -400px;/* 3 */
background-color: purple;
}
style>或者
需要(这种方法要记住，很好)
1.为元素设置宽度
2.设置左右偏移量都为0
3.设置左右外边距都为auto
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
div>
body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;/* 1 */
position: absolute;
margin: 0 auto;/* 3 */
left: 0;/* 2 */
right: 0;/* 2 */
background-color: purple;
}
style>垂直居中
1.行级元素–line-height
使用line-height让单行的文字垂直居中,line-height设置伪父容器的height，适用于只有一行文字的情况。
<div class="top">
<span>我span>
div>
.top{
width: 300px;
height: 100px;
text-align: center;//加上本行之后就是水平垂直居中了
border: 1px solid black;
}
span{
line-height: 100px;
}2.块级元素(设置成line-height或者是table格式)
子元素上设置display:inline-block;然后就和行内元素一样了~
.top{
width: 300px;
height: 100px;
text-align: center;//加上本行之后就是水平垂直居中了
border: 1px solid black;
}
.bottom{
line-height: 100px;
display: inline-block;
}
<div class="top">
<div class="bottom">我是</div>
</div>或者是用table和table-cell
<div id="parent">
<div id="child">Content herediv>
div>
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}或者用flex布局
<div class="wrap flex">
<div class="non-height ">1111div>
div>
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
box-sizing: border-box;
}
.non-height{
background: green;
}
.flex{
display: flex;
flex-direction: column;
justify-content: center;
}3.绝对定位元素居中
<div id="parent">
<div id="child">Content herediv>
div>
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}水平垂直居中
1.行级元素
父元素中设置text-align
行级元素设置vertical-align(或者行高设置和父元素一样)
2.块级元素
使用display:table-cell来居中或者margin:auto
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：
<div style="display:table-cell;vertical-align:middle;text-align:center;width:200px;height:200px;border:1px solid black;">
<div style="width:50px;height:50px;background:#03F;display:inline-block;">div>
div>div{
width:100px;
height:100px;
margin:0 auto;
}
3.浮动元素水平垂直居中
div{
float:left;
width:500px;
height:300px;
position:relative;
top:50%;
left:50%;
margin:-150px 0 0 -250px;
}
4.绝对元素水平垂直居中
让父元素relative结合margin和top，left布局–或者flex布局
<div class="container">
<div class="box">div>
div>方法一:让父元素relative结合margin和top，left布局
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top:-50px;
}
style>方法二：flex布局
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
style>
<div class="container">
<div class="box">div>
div>水平垂直居中已知宽高元素
1.父元素relative，子元素absolute
.parent-panel2{
width:100%;
height:400px;
border:1px solid #888;
position: relative;
}
.middle-panel2{
position: absolute;
width:300px;
height: 100px;
border:1px solid #888;
top:50%;
margin-top:-50px;
left: 50%;
margin-left: -150px;
}2.绝对定位
.div2 {
position: absolute;
border: 1px solid #888;
width: 100px;
height: 100px;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}水平垂直居中未知宽高元素
1.flex布局
<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px; //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;
}
style>
<div class="container">
<div class="box">div>
div>2.display:table-cell方法
#demo{
display:table;
width:500px;
margin:10px auto;
background:#eee;
}
#demo p{
display:table-cell;
height:100px;
vertical-align:middle;
}3.利用translate3d(-50%,-50%,0)实现垂直居中，只支持高版本
.parent{
position:relative;
}
.div2 {
position: absolute;
border: 1px solid #888;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%) 0;
}