html页⾯内容上下左右居中,HTML元素⽔平垂直居中实现⽅式
（每天⼀个知识点）...
在前端页⾯开发中，HTML元素⽔平垂直居中是需要经常处理的问题，今天我们就来系统的学习⼀下如何在HTML实现⽔平垂直居中，通过对主流⽔平垂直居中实现⽅式的实践，来到适合特定情况下的布局实现⽅式，并逐步达到灵活运⽤的⽔平。
⽔平居中
⽅式⼀： text-aligin:center(仅限⾏内元素)
text-align属性定义⾏内元素(例如⽂字)如何相对它的块⽗元素对齐。当其值为center时可以领⾏内元素居中对齐。
.box1{
width: 200px;
height: 200px;
background-color: orange;
text-align: center;
}
⼀段⽤于演⽰的⽂字
⽅式⼆：margin:0 auto
margin⽤来设置⼀个块元素的偏移量，其值有四个参数，分别代表：上、右、下、左四个⽅向的偏移量(顺时针)。其值可以简写为两个，第⼀个值代表上下两侧的偏移量，第⼆个值代表左右两侧的偏移量，当我们给左右两侧的偏移量设置为auto时，代表我们让浏览器⾃⼰选择⼀个合适的偏移量，这样就能实现左右⽔平居中。
.box2{
width: 75%;
background-color: lime;
margin:0 auto;
}
⼀段⽤于演⽰的⽂字
⽅式三：基于relative布局实现⽔平居中
我们可以通过将⼀个元素设置为浮动元素，然后将其定位设置为relative，将其⼦元素的定位也设置为relative。然后将⽗元素的left值设置为50%，将其向右移动50%的距离，接着我们给⼦元素设定left值为-50%使其向反向向移动⾃⾝位置的50%，这样同样可以实现居中效果。
.box3 {
float: left;
position: relative;
left: 50%;
}
.box4 {
position: relative;
left: -50%;
}
⼀段⽤于演⽰的⽂字
⽅式四：基于Flex实现⽔平居中(移动端⾸选)
基于flex实现⽔平居中很简单，只需要将justify-content属性设定为center即可。由于flex是⼀个响应式布局，是移动端跨端页⾯开发的⾸选，因此⾮常建议移动端开发的⼩伙伴以这种⽅式实现⽔平布局。
⼀段⽤于演⽰的⽂字
.box5{
display: flex;
justify-content: center;
}
⽅式五：⽗元素开启相对定位，⼦元素开启绝对定位
我们还可以通过给⽗元素开启相对定位，并给⼦元素开启绝对定位，来实现⽔平居中，具体实现⽅式如下：
⼀段⽤于演⽰的⽂字
.box6{
position: relative;
}
.box7{
width: 80%;
position: absolute;
background-color: pink;
left:0;
right: 0;
margin:0 auto;
}
垂直居中
⽅式⼀：单⾏⽂字实现⽔平居中
单⾏⽂字实现⽔平居中是我们在前端页⾯开发中常常遇到的⼀种情况，这种情况⽐较特殊，这⾥我们⾸先介绍。在⼀个块元素中，如果只有⼀⾏⽂字，我们只需将line-height参数设置为与当前容器的⾼度⼀致即可，代码如下：
⼀段⽤于演⽰的⽂字
.box1{
height: 80px;
line-height: 80px;
}
⽅式⼆：基于Flex实现垂直居中
基于flex实现垂直居中同样很简单的，只需要设置align-items:center即可，代码如下：
.box1 {
display: flex;
html内容文本框width: 100%;
height: 800px;
background-color: lightskyblue;
/* 设置元素垂直排列 */
align-items: center;
}
.boxinner1 {
height: 100px;
width: 100px;
background-color: gray;
}
⽅式三：基于Table布局模式
我们可以将⽗元素的display属性设置为table，然后将⼦元素的display设置为table-cell，然后设置vertical-align:middle；来实现⼦元素的垂直布局。
⼀段⽤于演⽰的⽂字
.outer {
width: 100%;
height: 100px;
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
这种垂直⽅向实现居中的缺陷在于⽗元素需要指定宽度。
⽅式四：absolute定位+transform
我们可以将⽗元素的position属性设置为relative，然后将⼦元素的属性设置为absolute，⼦元素就会相对于⽗元素进⾏定位，然后我们将⼦元素的top属性设置为50%，这时候⼦元素相对于⽗元素顶部的距离为⽗元素⾼度的50%，然后我们还需要将元素本⾝向上移动⾃⾝⾼度的50%，我们可以使⽤transfor
m实现。
⼀段⽤于演⽰的⽂字
.outer {
height: 100px;
position: relative;
background-color: lime;
}
.inner {
position: absolute;
top:50%;
transform: translate(0,-50%) ;
}
实现⽔平垂直居中的⽅式有很多，每个实现的⽅式都有⾃⼰的缺点或有点，⽐如我们将元素设置为浮动时会遇到⾼度塌陷的问题，⽽使⽤flex布局则会在⽼的IE浏览器存在兼容性问题。因此我们需要根据我们的使⽤场景灵活选择，争取到实现⽅式中的最优解！

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