CSS实现水平垂直居中的几种方式

1.最简单

margin: 0 auto
line-height等于height

.outer {width: 200px;padding: 200px;background-color: pink;}.inner {width: 100px;height: 100px;background-color: skyblue;margin: 0 auto;line-height: 100px;text-align: center;}

2.绝对定位的几种方式

2.1 absolute + 负 margin

.outer {position: relative;
}.inner {position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;/*需要inner元素的宽高*/
}

2.2 absolute + transform

.outer {position: relative;
}.inner {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/*css3里translate里的%移动距离
是盒子自身的宽度和高度来对
可以不知道元素的宽高*/
}

2.3 absolute + calc

.outer {position: relative;
}.inner {position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);/*需要inner元素的宽高calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算*/
}

2.4 absolute + margin: auto

.outer {position: relative;
}.inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;/* top bottom left right 值相等即可 */
}

此时设置 margin: auto;

意味着把剩余的空间分配给 margin，并且左右均分，

所以就实现了水平居中，垂直方向同理。

副作用:
left: 0; right: 0; 相当于 width: 100%;
top: 0; bottom: 0; 相当于 height: 100%;
缺点：需要固定居中元素的宽高，否则其宽高会被设为 100%

4.flex布局
写法1

.outer {display: flex;/*使子项目水平居中*/justify-content: center;/*使子项目垂直居中*/align-items: center;
}

写法2

.outer {display: flex;
}.inner {margin: auto;
}

5：grid布局

.outer {display: grid;
}.inner {justify-self: center; /* 水平居中 */align-self: center; /* 垂直居中 */
}

.outer {display: grid;
}.inner {margin: auto;
}

CSS实现水平垂直居中的几种方式相关推荐

css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
CSS实现水平垂直居中的6种方式
大家好,我是小梅,公众号:「小梅的前端之路」原创作者. 作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助. 在开发中经常需要实现的一个页面效果是: ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
水平垂直居中的几种方式
文章目录水平垂直居中一.实现水平垂直居中的方式二.具体实现元素定宽高利用定位 + calc 利用定位 + margin:负值元素不定宽高利用定位 + margin:auto 利用定位 + ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
CSS实现水平垂直居中的五种方法
前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
CSS常用水平垂直居中的几种方法
CSS水平垂直居中一.利用margin:auto 二.利用position: absolute 三.弹性盒子四.利用水平对齐和行高五.grid 为方便理解,欢迎查看线上效果,在线试一试一.利用 ...

CSS实现水平垂直居中的几种方式

CSS实现水平垂直居中的几种方式相关推荐

最新文章

热门文章