CSS 中几种最常用的水平垂直居中的办法

CSS是前端里面的根底之一，也是非常重要的一部分，它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中，总会有将元素或许文字进行水平笔直居中的要求。下面就为我们介绍CSS中几种常用到的水平笔直居中的办法。
01PART运用margin:auto
当元素有给定的高度以及宽度的时候，运用margin:auto;元素仅会水平居中，并不会进行笔直居中。此刻就需要设置元素的position为absolute，父级元素的position为relative，一起元素的上下左右都需要设置为0。
HTML代码
CSS代码
.box{width:200px;height:200px;background-color:#eee;position:relative;margin-top:20px;}.center1{width:50px;height:50px;background-color:#00ACED;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;}
作用展现：
02PART运用position:absolute
当现已知道了要进行水平笔直居中的元素的宽高时，就能够经过设置position:absolute来完成。但是，运用的一起还需要结合其他属性才完整完成。因为，单是设置absolute，上左间隔均为一半，就会出现下面这种状况。很显然能够看到，元素并不是彻底居中，仅只有左上角的位置在中心点
概念图：
因而想要完成元素彻底水平笔直居中，在设置了absolute定位后，能够设置margin值为负，或许运用calc来核算，上左间隔在50%的根底上还要减去元素本身一半的宽高。
margin值为负或许calc核算均是在已知元素宽高的状况下，假定不知道元素的宽高，那么怎样完成水平笔直居中呢？这儿就能够运用transform属性，经过坐标位移来完成居中。
CSS代码
/*结合margin*/.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-25px;}/*结合calc核算*/.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:calc(50%-25px)top:calc(50%-25px);}/*结合transform*/.center2{width:50px;height:50px;background-color:#7FFFD4;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
作用展现

03PART运用弹性布局
能够经过弹性布局来设置水平笔直居中，这儿需要设置父级元素display:flex;还需要设置两个属性，水平布局justify-content以及笔直布局align-items。
HTML代码
class=”box2″><divclass=”center4″>div></div>
CSS代码：
.box2{background-color:#eee;width:200px;height:200px;position:relative;margin-top:20px;display:flex;justify-content:center;align-items:center;}.center4{width:50px;height:50px;background-color:#B39873;}
作用展现：
04PART文本水平对齐和行高
前面介绍的是元素怎么完成水平笔直居中，下面介绍的是怎么将文字进行水平笔直居中。这第一个办法也是最经常用的，运用文本水平对齐text-align和行高line-height来完成的。
HTML代码
class=”box3″><divclass=”center5″>文字居中div></div>
CSS代码
.box3{background-color:#eee;width:200px;height:200px;margin-top:20px;}.center5{text-align:center;line-height:200px;}
作用展现
05PART运用网格布局
第二个办法能够经过网格布局grid来完成。而这儿经过grid有两种方式完成，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容好像差不多，不同的是在元素中设置的是align-self还要多了一个margin，父级元素中是align-items。
相关代码：
/*grid元素中设置*/.box4{background-color:#eee;width:200px;height:200px;margin-top:20px;display:grid;}.center6{align-self:center;justify-content:center;margin:auto;}/*grid父级元素中设置*/.box5{background-color:#eee;width:200px;height:200px;margin-top:20px;display:grid;align-items:center;justify-content:center;}
作用展现：
06PART总结
以上便是关于CSS怎么将元素或许文字进行水平笔直居中的几种常用办法，我们还其他关于CSS完成水平笔直居中的办法吗？请在评论区留下你的想法。