参考

水平垂直居中

1、grid布局实现

<style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;display: grid;place-content: center;}</style><body><div class="container" style="width: 100px; height: 100px; background: rgb(206, 100, 100)">块状元素</div>
</body>

实现效果

2、flex布局实现 flex+margin

<style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;display: flex;}.container{margin: auto;}
</style>
<body><div class="container" style="width: 100px; height: 100px; background: rgb(206, 100, 100)">块状元素</div>
</body>

实现效果如上

3、定位布局


<style>
//子绝父相html,body{margin: 0;padding: 0;width: 100%;height: 100%;position: relative;  //相对定位}.container{position: absolute;   //绝对定位，相对于祖先元素位置移动，如果没有祖先元素则以浏览器为基准定位top: 50%;left: 50%;transform: translate(-50%, -50%); //将元素向左移动50%的宽度，向上移动50%的宽度}
</style>
<body><div class="container" style="width: 400px; height: 400px; background: rgb(93, 185, 210)">块状元素</div><div class="container" style="color: red;">不定宽高的块状元素</div><span class="container" style="color: green;">行内元素</span>
</body>

块级元素水平居中

定宽：

给需要居中的块级元素加margin:0 auto；（块状元素的宽度一定要有）

块级元素垂直对齐

父元素设置display:flex和align-items：center；
要求：父元素必须显示设置height值

三、块级元素水平垂直居中
1、父元素（定高）设置

display:flex；

align-items：center；

块级元素（定宽）设置 margin:0 auto；

2、实现不定宽高水平垂直居中:（测试中块级元素和父元素都分别需要设置宽高）

父元素设置

display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中

CSS 水平居中、垂直居中、水平垂直居中相关推荐

CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
解读CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
CSS水平居中+垂直居中+水平/垂直居中的方法总结
目录水平居中行内元素块级元素方案一:(分宽度定不定两种情况) 方案二:使用定位属性方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中单行的行内元素多行的行内元素块级元素 ...
CSS块元素水平垂直居中的实现技巧
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...
html div 水平垂直居中显示,利用CSS实现div水平垂直居中
实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案. 1. p宽高固定width: 400px; height: 200px; position: absolute; ...
css实现元素水平垂直居中 1
css的居中,可以分为水平居中和垂直居中,实现居中的方式有以下几种: 1.text-align:center 块状元素,水平居中(只适用于块级元素,块级元素内的行内元素可以居中或者将此行内元素设置为块 ...
css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值利用定位+transform table布局 flex布局 grid布局利用定位+margin:auto ...
html css实现文本水平垂直居中显示
这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法. 一.利用行高(line-height)和verti ...

CSS 水平居中、垂直居中、水平垂直居中