CSS实现水平垂直居中

简介: CSS实现水平垂直居中

实现水平垂直居中
利用绝对定位(一)
.parent {

position: relative;

}
.child {

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

}
利用绝对定位(二):适用于已知盒子宽高
.parent {

position: relative;

}
.child {

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

}
利用绝对定位(三):适用于已知盒子宽高
.parent {

position: relative;

}
.child {

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;     /* 自身 height 的一半 */
margin-left: -50px;    /* 自身 width 的一半 */

}
flex布局
.parent {

display: flex;
justify-content: center;
align-items: center;

}

目录
相关文章
|
6月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
2月前
|
前端开发
css水平、垂直居中的写法
css水平、垂直居中的写法
54 2
|
4月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
207 3
|
4月前
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
47 2
|
4月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
91 2
|
4月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2102 1
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
61 0
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
43 0
|
6月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
102 1
|
6月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
51 10