_island Record

Appearance

📁 标签
CSS

水平居中 ​

文字水平居中（推荐） ​

css
.box{
    text-align: center;
}

缺点：

  1. 只对行内元素有效，会影响后代元素内容
  2. 如果子元素宽度大于父元素宽度则无效

margin 0 auto 块级居中 ​

css
.box{
    /* 必须设置宽度 */
    width: 50px; 
    margin: 0 auto;
}

缺点：

  1. 必须设置宽度，值不能设置auto
  2. 元素宽度要小于父元素宽度

为什么这样子设置会居中-原理

绝对定位 ​

css
.parent{
    height: 200px;
    width: 200px; 
    position: relative;
    background-color: #c1c;
}
.child{
    position: absolute;
    left: 50%;  /*父元素宽度一半,这里等同于left:100px*/
    transform: translateX(-50%);  /*自身宽度一半,等同于margin-left: -50px;*/
    width: 100px;
    height: 100px;
    background-color: #eee;
}

缺点：

  1. 脱离文档流
  2. 需要知道父级宽度

flex布局（推荐） ​

css
.box{
    display: flex;
    justify-content: center;
}

缺点：

  1. 老浏览器兼容问题

垂直居中 ​

文本居中 ​

css
.box{
    height: 30px;
    /*要和height一样，利用line-height拉高占据的空间*/
    line-height: 30px;  
}

缺点：

  1. 只能是行内元素

表格元素居中 d:table-cell ​

css
.tableBox{
    display: table-cell;
    vertical-align: middle;
}

绝对定位 ​

css
.parent{
    position: relative;
    width:100px;
    height:100px;
}
.child{
    position: absolute;
    margin: auto 0;
    top: 0;
    bottom: 0;
    height: 50px;
}

缺点：

  1. 脱离文档流

flex ​

css

.box{
    display: flex;
    align-items: center;
}
css
.parent{
    display: flex;
}
.child{
    align-self: center;
}

缺点：

  1. 老浏览器兼容问题

垂直水平居中 ​

行内/行内块级/图片 ​

利用text-align: center;实现水平居中，line-height和vertical-align实现垂直居中

css
.parent{
height: 150px;
line-height: 150px;  /*行高的值与height相等*/
text-align: center;
font-size: 0;   /*消除幽灵空白节点的bug*/
}
.child{
/*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
vertical-align: middle;
}

d:table-cell ​

使用table-cell&vertical-align实现垂直对齐，水平居中通过margin（块级元素）/text-align（行内元素）

css
.parent{
    height: 100px;
    width: 100px;
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;*/   
    /* 如果是行内元素就添加这个 */
}
.child{
    /* 如果是块级元素就添加这个 */
    margin: 0 auto;
    width: 50px;
    height: 50px;
}

缺点：

  1. 设置table-cell元素会使宽度和高度的值设置百分比失效

button ​

利用button默认样式，将目标元素改为行内/行内块级元素

css
button{  /*改掉button默认样式就好了,不需要居中处理*/
    height: 200px;
    width: 200px;
    outline: none;
    border: none;
}
/*如果是块级元素，display: inline-block; */

缺点：

  1. 只能用于行内内容
  2. IE浏览器点击会有凹下的效果

绝对定位 ​

css
.parent{
    position: relative;
    width:100px;
    height:100px;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    /*left和top值为父级元素的一半*/
    transform: translate(-50%,-50%); 
}

缺点：

  1. 脱离文档流

flex ​

css
.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

缺点：

  1. 老浏览器兼容问题