CSS实现水平垂直居中对齐

在CSS中实现水平居中,会比较简单。常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: center实现;如果想实现块级元素的水平居中对齐,可以设置magin: auto。而如果想实现垂直居中对齐,或许就不太容易。

以下,我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处,望指出。

水平垂直居中的实现可以分为两大内容,一是高度随内容自适应变化一是固定高度

固定高度实现水平垂直居中

方法一

最常用的方法是使用height + line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐

<div class="container">Hello World!</div>

.container {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid red;
}

缺点:固定高度,无法实现两行文本的垂直居中对齐

方法二

使用绝对定位的方法,配合margin负值使用。可以实现元素的水平垂直居中效果。

<div class="container">Hello World!</div>

.container {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
border: 1px solid red;
}

当然了,可以使用CSS3的calc函数简化上面的CSS代码

.container {
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 300px;
border: 1px solid red;
}

缺点:固定高度,高度无法自适应内容。元素脱离文档流。

方法三

添加空标签的方式,并且使该元素浮动,脱离文档流,避免影响其他元素的布局。

<div class="space"></div>
<div class="container">
<div class="inner">
hello world!
</div>
</div> .space {
float: left;
height: 50%;
margin-top: -150px;
} .container {
clear: both;
height: 300px;
border: 1px solid red;
position: relative;
}

缺点:这种方式下的垂直居中需要固定高度,无法实现内容自适应高度。同时,出现多余的空div元素。

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个参数。如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。

<div class="container">Hello World!</div>

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 自身宽度和高度的一半
border: 1px solid red;
}

优点:无需定高度。高度随内容自适应。

缺点:元素脱离文档流。如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视口裁切掉。

方法二

我们知道,可以使用margin来实现水平居中对齐,而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。

<div class="container">Hello World!</div>

.container {
width: 300px;
margin: 50% auto 0;
border: 1px solid red;
tarnsform: translateY(-50%);
}

上面代码中,由于百分比是基于父元素(此时的父元素为body元素)的宽度计算的,所以此时的50%加上translate负值并不能实现垂直居中布局。

不过,CSS中存在一个vh(视口高度),也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度,1vh=1%,即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。因此,以上代码可改为如下,即可实现水平垂直居中效果。

<div class="container">Hello World!</div>

.container {
width: 300px;
margin: 50vh auto 0;
transform: translateY(-50%);
border: 1px solid red;
}

方法三

CSS3中存在flex布局(伸缩布局盒模型,也叫弹性布局盒模型),对于flex熟悉的朋友来说,使用flex实现水平垂直居中是再简单不过的了。

<div class="container">
<div class="inner">
<p>hello world!</p>
</div>
</div> .container {
display: flex;
height: 100vh;
} .inner {
margin: auto;
}

当我们使父元素display: flex时,margin: auto不仅可以水平居中,也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。

当然,也可以使用justify-content: center来定义弹性项目主轴的对齐方式,align-items: center来定义弹性项目侧轴的对齐方式。

<div class="container">
<div class="inner">
<p>hello world</p>
</div>
</div> .container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

方法四

可以使用display: table来模拟表格,并给子元素设置display: table-cell,让其成为表格的某个单元格,同时设置vertical-align: middle,即可实现垂直居中布局

<div class="container">
<div class="inner">
hello world!
</div>
</div> .container {
display: table; /* 让div以表格的形式渲染 */
width: 100%;
border: 1px solid red;
} .inner {
display: table-cell; /* 让子元素以表格的单元格形式渲染 */
text-align: center;
vertical-align: middle;
}

使用此种方式,不需要固定高度。只需要给定任意高度或者不给高度,即可实现水平垂直居中效果。

CSS(3)实现水平垂直居中效果的更多相关文章

  1. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  2. css实现水平/垂直居中效果

    一.如果是已知宽高的元素做水平/垂直居中效果的话,可以直接用具体的数值指定定位布局或偏移布局,这个就不过多讨论.这里主要介绍在不知宽高或需要弹性布局下的几种实现方式. 二.1.table表格法思路:显 ...

  3. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  4. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  5. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  6. 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  7. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  8. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  9. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

随机推荐

  1. uname命令

    uname用于显示系统信息. 语法: uname [option]... 选项: -a:显示所有信息: -s:显示内核名称: -n:显示主机名: -r:显示内核版本: -v:显示更多的内核版本信息: ...

  2. ReactiveCocoa学习总结(1)

    1. 它是什么? 官方解释: [RACSignal] is a push-driven stream with a focus on asynchronous event delivery throu ...

  3. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

  4. hdu4597 Play Game DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 感觉很不错的区间DP,又做了一遍,感觉自己对边界的处理还是很欠缺 代码: #include< ...

  5. Linux文件属性及如何修改文件属性

    ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---.   7       root     root       4096       Apr3 12:31 ...

  6. jgs--多线程和synchronized

    多线程 多线程是我们开发人员经常提到的一个名词.为什么会有多线程的概念呢?我们的电脑有可能会有多个cpu(或者CPU有多个内核)这就产生了多个线程.对于单个CPU来说,由于CPU运算很快,我们在电脑上 ...

  7. Tomcat--各个目录详解(二)

    Tomcat整体目录: 一.bin文件(存放启动和关闭tomcat脚本) 其中.bat和.sh文件很多都是成对出现的,作用是一样的,一个是Windows的,一个是Linux. ① startup文件: ...

  8. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  9. 浅谈一下web移动端基本

    屏幕尺寸.屏幕分辨率.屏幕像素密度 屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等. 屏幕分辨率 ...

  10. lua中 table 元表中元方法的重构实现

    转载请标明出处http://www.cnblogs.com/zblade/ lua作为游戏的热更新首选的脚本,其优势不再过多的赘述.今天,我主要写一下如何重写lua中的元方法,通过自己的重写来实现对l ...