htmltd⽔平居中,html元素⽔平居中的⼏种⽅法
下⾯我将⼀⼀的介绍关于html元素⽔平居中的⼏种⽅式
⼀：对于⾏内元素采⽤text-align:center；的⽅式
⼆：采⽤margin:0 auto；来实现⽔平居中显⽰
三：⽤table实现
四；块级的元素但是通过转换成⾏内元素来实现块级元素的⽔平居中显⽰
五：⽗⼦元素都采⽤相对定位，⽗元素left:50%;⼦元素left:-50%；相对⾃⼰的长度减回50%，这样实现向右偏移后拉回多的部分
六：采⽤css3的flexbox，display:flex;
七：⽤⽗元素的 display:relative；直接采⽤position:absolute;left:0;right:0;margin:auto来实现⽔平以居中
下⾯是讲解的具体的代码：
css的⽔平居中
#page{
width: 100%;
color: white;
}
.he{
width: 100%;
height: 100px;
background: #625050;
text-align: center;
line-height: 100px;
}
.bo{
width: 100%; background: #6aa087; }
.fo{
height: 100px; background: #2f5d34; }
.content{
height: 100px; border: 2px solid #fff; }
.content1{ background: #66a05c; text-align: center;
}
.content2{ background: #8a5841; text-align: center;
}
.content2Bo{
height:50px;
width: 60%;
border: 2px solid red; line-height: 50px; margin: 0 auto;
}
.content3{ background: #2f5d34; }
table{
margin: 0 auto;
}
background: #8a5841; text-align: center;
}
.contentBo4{
display: inline;
}
ul li{
list-style-type: none;
}
.content5{
float: left;
position: relative;
left: 50%;
}
.contentBo5{
position: relative;
left: -50%; background: #231b40; }
.content6{
width: 100%;
text-align: center; background: #9ca05c; display: flex;
align-items: center; justify-content: center; }
.content7{
position: relative;
}
.contentBo7{
position: absolute; left: 0;
width: 80%;
border: 2px solid red;
margin: 0 auto;
text-align: center;
}
下⾯是对元素⽔平居中对齐的⼏个例⼦以及说明
这是内容区⼀：实现对⾏内元素的⽔平居中显⽰ 采⽤text-align:center；的⽅式。
这是内容区⼆：红⾊区域部分采⽤margin:0 auto；来实现⽔平居中显⽰，当然要写好元素的宽度。
这是内容区三：⽤table实现。
这是第⼀⾏
这是第⼆⾏
这是内容区四：本来是contentBo4的块级的元素但是通过转换成⾏内元素来实现块级元素的⽔平居中显⽰。
这是内容区五：⽗⼦元素都采⽤相对定位，⽗元素left:50%;⼦元素left:-50%；相对⾃⼰的长度减回50%，这样实现向右偏移后拉回多的部分。
这是内容区六：采⽤css3的flexbox，display:flex;
这是内容区七:⽤⽗元素的 display:relative；直接采⽤position:absolute;left:0;right:0;margin:auto来实现⽔平以居中。
总结下：其实实现⽔平居中只有⼀下⼏种思路：
html怎么让所有内容居中1：对于最简单的⾏内元素的居中采⽤text-align:center；设置即可。
2：对于最普通的⽔平居中采⽤绝对定位后设置left：50%；后再采⽤各种⽅式去实现⾃⾝⽔平差的补回。
3：对于普通的元素对齐还可以采⽤绝对定位后left:0;right:0；加上元素的宽度，在此基础之上就可以采⽤margin:auto；实现⽔平对齐了。
4：⽤css3的Flexbox属性
5：在元素外嵌套table实现，但是这样会有很多层嵌套
6：marin:0 auto;⽅便的实现已知宽度的⽔平居中

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