div中的内容⽔平居中显⽰
今天总结下⼏种div中的内容⽔平居中的⼏种⽅法，⾄于好坏我还不是很清楚，就不阐述，希望有⼤佬能指⽰下，⼩弟不胜感激
1.⾸先是常规的 margin属性，上下固定，左右⾃适应
<style>
.div5{
width: 200px;
border: 1px solid darkgoldenrod;
}
.div5 p{
border: 1px solid darkorange;
margin: 25% auto;
width: 100px;
}
</style>
<div class="div5">
<p>
this is a demo
this is a demo
this is a demo
this is a demo
</p>
</div>
2.div⾼度⾃适应的情况
div在不设置⾼度的时候，会被⾥⾯的内容撑开，内容⾃动填充在div中，⽆论是⼀⾏内容还是多⾏内容，此时不需要设置垂直居中，内容⾃动在中间的，
想要看的更直观些，只需要加上padding元素，内容四周便会留下空⽩，实现⽔平垂直居中的效果
<style type="text/css">
.div1{
width: 200px;
border: 1px solid red;
padding: 20px;
}
</style>
<div class="div1">
this is a demo
this is a demo
this is a demo
this is a demo
</div>
3. 设置⾼度，多⾏的
当⾏的⽂字内容我们⽤line-height就能解决
多⾏的我们需要在⾥⾯加⼀个块级标签<div><p>
3.1 绝对定位，脱离⽂档流的⽅式
<style type="text/css">
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
}
.
div2 p{
width: 150px;
border: 1px solid blueviolet;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
</style>
<div class="div2">
<p>
this is a demo
this is a demo
this is a demo
this is a demo
</p>
</div>
3.2 模拟表格形式
<style>
.div3{
width: 200px;
height: 200px;
border: 1px solid green;
display: table;//此元素会作为块级表格来显⽰（类似 <table>），表格前后带有换⾏符。            }
.div3 p{
border: 1px solid darkred;
display: table-cell;//此元素会作为⼀个表格单元格显⽰（类似 <td> 和 <th>）
vertical-align: middle;
text-align: center;
}
</style>
<div class="div3">
<p>
this is a demo
this is a demo
this is a demo
this is a demo
</p>
</div>
4.CSS3Flex布局
<style>
.div4{
width: 200px;
height: 200px;
border: 1px solid darkgoldenrod;
display: flex;
justify-content: center;
align-items: center;
}
.div4 p{
div border属性border: 1px solid darkorange;
}
</style>
<div class="div4">
<p>
this is a demo
this is a demo
this is a demo
this is a demo
</p>
</div>
    以上就是⼩弟常⽤的⼏种⽅式，若有新的⽅式再跟⼤家分享

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。