這個(gè)問(wèn)題钧椰，經(jīng)久不衰。符欠。嫡霞。
一、一個(gè)寬高固定的元素在頁(yè)面上實(shí)現(xiàn)水平垂直居中有哪些方法背亥？
方法1. 父元素相對(duì)定位秒际，目標(biāo)元素絕對(duì)定位，設(shè)置margin為auto auto狡汉，left娄徊、right、top盾戴、bottom都設(shè)為0寄锐。
代碼：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.content {
width: 300px;
height: 300px;
background: orange;
position:absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法2. 父元素相對(duì)定位，目標(biāo)元素絕對(duì)定位尖啡，left和top分別設(shè)為50%橄仆，設(shè)置目標(biāo)元素一半寬高的margin負(fù)間距。
代碼：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.content {
width: 300px;
height: 300px;
background: orange;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法3. Flex彈性布局法衅斩。
代碼：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /*顯示在主軸的中間*/
align-items: center; /*子項(xiàng)在側(cè)軸中間位置*/
}
.content {
width: 300px;
height: 300px;
background: red;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
方法4. 父元素使用flex布局（display：flex）,子元素使用margin：auto盆顾。
代碼：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.content {
width: 300px;
height: 300px;
background: red;
margin: auto auto;
}
</style>
<body>
<div class="content"></div>
</body>
效果：
image.png
二、多行文字實(shí)現(xiàn)水平垂直居中有哪些方法畏梆？
場(chǎng)景：父元素寬度固定您宪，要求實(shí)現(xiàn)文字內(nèi)容水平垂直居中。
方法1. 用display:table和display:table-cell模擬盒子奠涌。
代碼：
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.table {
display: table;
width: 500px;
height: 100px;
margin:auto auto;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<body>
<div class="table">
<div class="table-cell">
多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中
</div>
</div>
</body>
效果：
image.png
缺點(diǎn)：ie7以下不兼容宪巨。
方法2. 用display:flex實(shí)現(xiàn)。
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
.middle-content{
margin: auto auto;
width: 500px;
height: 500px;
display: flex;
align-items: center;
}
</style>
<body>
<div class="middle-content">
多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中多行文字水平垂直居中
</div>
</body>
效果：
image.png
