web前端

css 居中–分类整理及程序示例

本节将css居中分类如下：

• 水平居中
• 垂直居中
• 水平垂直居中

---

表格

居中样式	父元素依赖	需要定宽	待居中元素
水平	null	width: 200px(高自适应)	margin: 0 auto
水平	null	width: 200px(高自适应)	position: relative; margin: auto
水平	display: relative	width: 200px(高自适应)	left: 50%; top: 0; margin: 0 -100px;
垂直	display: relative	height: 100px(宽自适应)	left: 0; top: 50%; margin: -50px 0;
水平垂直	display: relative	width: 200px; height: 100px	left: 50%; top: 50%; margin: -50px -50px;
水平	display: relative	null(高宽自适应)	position: absolute; left: 50%; top: 0; transform: translate(-50%,0);
垂直	display: relative	null(高宽自适应)	position: absolute; left: 0; top: 50%; transform: translate(0,-50%);
水平垂直	display: relative	null(高宽自适应)	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
水平	display:flex;justify-content: center	null(width自适应，height未设置时拉伸为与父元素等高)	null
垂直	display:flex;align-items: center	null(width、height自适应)	null
水平垂直	display:flex;align-items: center;justfy-content:center	null(width、height自适应)	null
水平居中	text-align: center	null(高宽自适应)	display: inline-block OR display: inline
垂直	dispaly: table-cell; verical-align: middle	null(高宽自适应)	display: inline-block OR display: inline
水平垂直	dispaly: table-cell; verical-align: middle; text-align: center;	null(高宽自适应)	display: inline-block OR display: inline

代码块

通用html:

/*HTML*/
  <div class="parent">
    <div class="child">
        <p>ok!p</p>
    </div>
  </div>

css代码：

• margin: 0 auto

 /*CSS*/
  .child{
    width: 200px;
    margin: 0 auto;
    background-color:  pink;
  }

• margin: auto;

.child{
    position: relative;
    width: 200px;
    margin: auto;
    background-color:  pink;
  }

• absolute+margin

 .parent{
    position: relative;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px -100px;
    background-color:  pink;
  }

• absolute+transform

  .parent{
    position: relative;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color:  pink;
  }

• text-align

 .parent{
    text-align: center;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    display: inline-block;
    background-color:  pink;
  }

• verical-align

  .parent{
    display: table-cell;
    vertical-align: middle;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    display: inline-block;
    background-color:  pink;
  }

• verical-align + text-align

  .parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    display: inline-block;
    background-color:  pink;
  }

• flex+justify-content

 .parent{
    display: flex;
    justify-content: center;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    background-color:  pink;
  }

- flex+align-items

  .parent{
    display: flex;
    align-items: center;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    background-color:  pink;
  }

- flex+justify-content+align-items

  .parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 300px;
    background-color: gray;
  }
  .child{
    background-color:  pink;
  }