CSS的水平居中与垂直居中

一、水平居中
行内元素水平居中：指文本text、图像img、按钮超链接等

只需给父元素设置text-align:center即可实现

.center{text-align:center;
}

<div class="center">水平居中</div>
块级元素水平居中：指div标签等

只需给需要居中的块级元素设置margin:0 auto即可，但宽度width值一定要有

.center{width:200px;margin:0 auto;border:1px solid red;
}

<div class="center">水平居中</div>
不定宽块级元素水平居中：指块级元素宽度不固定

方法1：通过给要居中显示的元素，设置display:table，再设margin:0 auto来实现

.center{display:table;margin:0 auto;border:1px solid red;
}

<div class="center">水平居中</div>
方法2：设置inline-block（多个块状元素）即子元素设置inline-block，同时父元素设置text-align:center来实现

.center{text-align:center;
}
.inlineblock-div{display:inline-block;
}<div class="center"><div class="inlineblock-div">水平居中</div>
</div>

二、垂直居中
基于设置div的top值为50%后，再调整垂偏移量来实现居中

.content {width: 400px;height: 400px;background: red;position: relative; /* 垂直居中 */top: 50%; /* 偏移 */// margin-top: -200px; /* 方法1：因为div的自身高度是400，所以需要设置margin-top值为-200 */transform: translateY(-50%); /* 方法2：使得div向上平移（translate）自身高度的一半(50%) */
}<div class="content"></div>

弹性布局（flex）来实现居中

.body {display: flex;align-items: center; /* 定义body的元素垂直居中 */justify-content: center; /* 定义body的里的元素水平居中 */
}
.content {width: 400px;height: 400px;background: red;
}<div class="body"><div class="content"></div>
</div>

通过verticle-align:middle实现CSS垂直居中，需要注意，vertical生效的前提是元素的display：inline-block

.content {width: 400px;height: 400px;background: red;display: inline-block;vertical-align: middle;
}<div class="content"></div>

三、水平垂直居中

.center{width:400px;margin:0 auto; /* 水平居中 */border:1px solid red;position: relative; /* 垂直居中 */top: 50%;transform: translateY(-50%);
}<div class="center">水平垂直居中</div>
.center{position: absolute;top: 50%; /* 定位父级的50% */left: 50%;transform: translate(-50%, -50%); /* 定位自己的50% */border:1px solid red;
}<div class="center">水平垂直居中</div>

四、超级居中

    {display: flex;justify-content: center;align-items: center;overflow-wrap:anywhere//自动换行}//上下左右居中{//超级居中display:grid;place-items:center;}{position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;}//居中父级设置display: grid;
父级设置或子级设置{
justify-self：center;左右居中
align-self：center上下居中}line-height: //设置与div高度一致  使得内容保持上下居中

CSS的水平居中与垂直居中相关推荐

CSS实现水平居中与垂直居中
CSS实现水平居中与垂直居中一.水平居中 1. 必备知识 1.1 text-align 属性 1.2 display 属性 1.3 margin 属性 1.4 position 属性 1.5 tra ...
CSS的水平居中、垂直居中和水平垂直居中
CSS的水平居中.垂直居中和水平垂直居中 1.水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素 ...
css实现水平居中和垂直居中
css实现居中 1.水平居中 div { width:100px//设置宽度固定 margin: auto //居中 } 2.利用绝对定位实现水平垂直居中: position: absolute: l ...
CSS居中——水平居中、垂直居中方法
水平居中 1.行内或类行内元素(如文本.链接) 在块级父元素中用CSS样式实现行内元素水平居中,只需要设置:text-align: center; 这种方法可以让 inline / inline-bl ...
CSS实现水平居中、垂直居中、水平垂直居中
水平居中行内元素行内元素想要水平居中,只需要给父元素添加text-align:center即可. <div class='container'><span>example& ...
css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中利用margin: 0 ...
html悬浮的图片居中,HTML/CSS：图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
CSS水平居中，垂直居中，水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
css 水平居中和垂直居中
转自子非鱼87(http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html) 1.水平居中 (1) 文本.图片等行内元素的水平居中给父元 ...

CSS的水平居中与垂直居中

CSS的水平居中与垂直居中相关推荐

最新文章

热门文章