CSS垂直居中和水平居中方式
阿新 • • 發佈:2018-12-03
一。垂直居中
1.單行文字實現居中:設定行高
.box {
width:200px;
height:200px;
line-height:200px;//實現單行文字居中
background:red;
}
.text {
vertical-align: middle;
}
這種主要給父元素固定高度,利用line-height屬性來使文字實現垂直居中。只能在單行文字下使用。
2.利用display:table-cell不推薦使用
/*第一種:display:table-cell*/ .box{ background: red; width: 150px; height: 150px; display: table-cell; vertical-align: middle; text-align: center; } .div1{ /*width: 50px;*/ height: 20px; background: green; } .div2{ background: yellow; } </style> <body> <div class="box"> <div class="div1">可大可看看</div> <div class="div2">我不知道</div> <div class="div3">哦哦</div>
利用了表格樣式的居中方式。可以實現盒子和文字居中。
3.display:flex;
/*第一種:display:flex;*/ .box{ background: red; width: 150px; height: 150px; display: flex; align-items: center; /*定義元素垂直居中*/ justify-content: center; /*定義容器裡的元素水平居中*/ } .div1{ /*width: 50px;*/ /*height: 20px;*/ background: green; } .div2{ background: yellow; }
通過彈性魔盒來實現居中,這種方式特別優雅只需要給父元素新增就可以,不論你子元素是什麼樣子都居中
4.定位position(推薦)萬能
/*第4種:position;*/
.box{
background: red;
width: 150px;
height: 150px;
position: relative;
}
.div1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: green;
}