css实现水平居中的几种方法,css实现水平垂直居中的几种方法

笔记学习整理

css垂直水平居中分为：

定宽居中

方法①absolute+负margin

②absolute+margin:auto

③absolute+calc

④ min-height: 100vh+flex+margin:auto

不定宽居中

①absolute + transform

②lineheight

③writing-mode

④css-table

⑤flex

⑥grid

一、定宽居中

1、定宽居中(absolute+负maigin)

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

定宽居中

.father {

width: 400px;

height: 400px;

border: 1px solid blue;

position: relative;

}

.son {

width: 100px;

height: 100px;

background-color: orange;

/* 1、定宽高定位：absolute + 负边距margin */

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

2、定宽居中(absolute+maigin:auto)

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

position: relative;

}

.box.size {

width: 100px;

height: 100px;

}

.box {

background: green;

/*2、定宽高定位：absolute + margin:auto */

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

子元素定宽高

3、定宽居中(absolute+calc)

position:absolute;

top:calc(50% - 50px);

left:calc(50% - 50px);

定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

position: relative;

}

.box.size {

width: 100px;

height: 100px;

}

.box {

background: green;

/* 3、定宽高定位：(兼容性依赖css3的calc)absolute + 计算属性calc */

position: absolute;

top: calc(50% - 50px);

left: calc(50% - 50px);

}

子元素定宽高

4、定宽居中(min-height: 100vh+flex+margin:auto)

定宽居中

main{

min-height: 100vh;

/* vh相对于视窗的高度，视窗高度是100vh */

/* “视区”所指为浏览器内部的可视区域大小，

即window.innerWidth/window.innerHeight大小，

不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */

display: flex;

}

div{

width: 50px;

height: 50px;

background-color: red;

margin: auto;

}

二、不定宽居中

1、不定宽高居中：absolute+transform(依赖translate 2d的兼容性)

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

不定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

position: relative;

}

.box {

background: green;

/* 1、不定宽高居中：(依赖translate 2d的兼容性)absolute+transform */

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

子元素不定宽高

2、不定宽高居中：lineheight

不定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

/* 2、不定宽高居中 */

text-align: center;

line-height: 300px;

font-size: 0px;

}

.box {

/* 2、不定宽高居中lineheight */

display: inline-block;

vertical-align: middle;

line-height: inherit;

text-align: left;

font-size: 16px;

}

子元素不定宽高

3、不定宽高居中

不定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

/* 3、不定宽高居中css-table */

display: table-cell;

text-align: center;

vertical-align: middle;

}

.box {

/* 3、 */

display: inline-block;

}

子元素不定宽高

4、不定宽高居中flex

不定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

/* 4、不定宽高居中flex */

display: flex;

justify-content: center;

align-items: center;

}

子元素不定宽高

5、不定宽高居中grid (css3网格系统grid兼容性不如flex 不推荐使用)

display: grid;

justify-self: center;

align-self: center;

不定宽高定位

.wp {

border: 1px solid red;

width: 300px;

height: 300px;

/* 5、grid */

display: grid;

}

.box {

/* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */

justify-self: center;

align-self: center;

}

子元素不定宽高

这边通过网上学习，总结了以上几种方法，便于日后遗忘。