不定宽高元素的水平垂直居中

这个问题最早是在某个公司笔试的时候出现的,当时还不会啊,除了会text-align: center;外啥也不会,特此做一个总结,也过了好久了,现在就当整理笔记了。


实现的效果如下:
不定宽高元素的水平垂直居中_第1张图片
html代码:

<div class="">
  <div>我是一段文字div>
div>

方法有三:
1、 绝对定位来实现

.one {
   position: relative;     //父类元素设置为relative
   width: 200px;
   height: 200px;
   border: 1px solid black;
 }
 .one>div {
   position: absolute;                //该元素设置为absolute
   top: 50%;                          //距顶部50%
   left: 50%;                         //距左边50%    
   transform: translate(-50%, -50%);  //把该元素的中心点从左上,移至中心
 }

2、flex布局

.two {
  display: flex;             //在父类上设置成flex
  width: 200px;
  height: 200px;
  border: 1px solid black;
  justify-content: center;   //主轴上中心排列
  align-items: center;       //交叉轴上也是中心排列
}

3、table-cell

.three {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: table-cell;           //在父类设置成table-cell,这样就类似一个单元格了
  text-align: center;            //对该单元格进行水平方向上的设置:居中对齐
  vertical-align: middle;        //对该单元格进行垂直方向上的设置:居中对齐
}

暂时不知道其他方法了,有的话在进行补充。

你可能感兴趣的:(随手笔记)