CSS实现垂直居中的常用方法

loverlucky 2016-03-15

详细过程见原文http://www.cnblogs.com/yugege/p/5246652.html

方法1：使用margin-top把div往上偏移之外

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

方法2：CSS3的transform属性也可以实现这个功能，通过设置div的transform:translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>
loverlucky

loverlucky

相关推荐

CSS设置行内元素和块级元素的水平居中、垂直居中

什么叫行内元素？text-align:center;height:30px;line-height:30px4.CSS设置块级元素的水平居中和垂直居中：关键代码：

drdrsky / 0评论 2020-06-16

css盒子垂直居中的5种方式

第二种，使用display:table和display:table-cell配合，两个必须分别作用于父盒子和子盒子

dazhifu / 0评论 2020-06-14

div内容水平垂直居中的正确玩法

<!DOCTYPE html>. text-align: center;height: 300px;border: 1px solid rebeccapurple;display: inline-block;vertical-align: mi

PioneerFan / 0评论 2020-06-10

css中元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。line-height：用于设置多行元素的空间量

冰蝶 / 0评论 2020-06-05

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。有些方法在一些浏览器中无效。这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的vertical-al

heavenautumn / 0评论 2020-05-11

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

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和tex

sdbxpjzq / 0评论 2020-05-04

微信小程序设置图片文字等子元素水平居中或垂直居中

比如有一个图片控件和一个文本控件，想让他垂直居中显示，应该怎么实现？justify-content:center;//设置弹性盒子元素在主轴的对齐方式，这里direction是column只设置垂直居中

guojiadonglian / 0评论 2020-04-24

css 水平居中，垂直居中

.box { width:300px; height:300px; border:2px solid red;}img{ display:block; width:100px; height:100px; margin:0 auto;}. .

lcyangcss / 0评论 2020-04-21

div 内容垂直居中

<div style="width: 200px;height: 200px;border: solid red 1px;display: flex;align-items: center;">

HSdiana / 0评论 2020-03-28

css样式设置元素居中的最简便方式 左右居中或垂直居中

父元素需要设置position为非static定位，如果需要左右也居中，加上left: 0;right: 0;即可。

葉無聞 / 0评论 2020-03-23

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。B-1:为什么选择方法一加入table标签?针对B

lyg0 / 0评论 2020-03-07

实现css文字垂直居中的8种方法

这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言。关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同

wcssdu / 0评论 2020-01-11

css - 水平垂直居中几种方式

position: absolute设置left、top、margin-left、margin-to(定高)；grid，兼容性相对比较差；

冰蝶 / 0评论 2020-01-10

0060 translate、margin 实现绝对定位的盒子 水平居中、垂直居中

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

玫瑰小妖 / 0评论 2019-12-31

css水平垂直居中的几种方法

在使用HTML5+CSS3进行页面布局时，可以进行排列不同的形式。那么，如何设置元素为水平垂直居中显示呢？去掉position属性，然后设置display值为flex，并添加justify-content和align-items属性

dazhifu / 0评论 2019-12-31

垂直水平居中

<!DOCTYPE html>. width: 300px;height: 300px;background: red;display: table-cell;vertical-align: middle;width: 100px;height

行吟阁 / 0评论 2019-12-08

css居中-水平居中,垂直居中,上下左右居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述。但子元素是有限制的，只对图片，文字等行内元素有效。

zengni / 0评论 2019-11-13

css布局：如何实现垂直居中？

5. 父级设置弹性盒子，并设置弹性盒子相关属性；

zuncle / 0评论 2019-11-08

常用元素水平垂直居中方案

其次子元素的宽高必须已知，因为需要设置子元素的负margin.

谷歌架构师 / 0评论 2019-11-04

CSS解决未知高度垂直居中

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE ，内部子元素定为table-cell ,通过vertical-al

编程手札 / 0评论 2014-05-27

CSS 设置水平居中 垂直居中

在其父元素中设置：text-align:center;方法1:为需要设置为居中的元素外加一个table标签;为这个table设置 margin-left：auto;margin-right:auto;方法2:改变这个块元素为display:inline,然

renjianwolai / 0评论 2015-05-14

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

IT游罠 / 0评论 2015-11-15

CSS实现垂直居中的常用方法

在前端开发过程中，盒子居中是常常用到的。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。下面我们一起来讨论一下实现垂直居中的方法。首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。接下来，需要做

aiolos / 0评论 2016-04-15

div实现在屏幕水平垂直居中的方法

如果你有更多更好的方法，欢迎亲们补充。

zljiaa / 0评论 2019-09-07

CSS 垂直居中的七种方法

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会

lcyangcss / 0评论 2019-08-16

CSS垂直居中的七个方法

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以

k韶华 / 0评论 2019-07-01

在我水了11种水平垂直居中方法之后，我终于明白了

老生常谈，水平垂直居中。</div>根据如上结构，通过css实现水平垂直居中。绝对定位利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高，使用数值或者百分比的方式进行定位。}通过设置四向为0和margin: auto实现

tanjiayq / 0评论 2019-07-01

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

.box span{margin: auto;}2. 元素为为定宽定高的元素绝对定位和负边距。margin-top:-25px;绝对定位和0原理：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的margi

juzhengqian0 / 0评论 2019-07-01

css实现水平垂直居中

纯CSS实现水平垂直居中最近的几场面试都问了这个问题，自己也只答了2种，感觉面试官不满意，特地总结了几种在开发中比较实用的方法，与大家分享。</div>因为margin/padding的百分比值是参照父元素的width，所以无法用百分比。

Alisa0 / 0评论 2019-07-01

css实现水平垂直居中的4种方法

margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */. transform: translate; /* 使用css3的transform来实现 */

WebVincent / 0评论 2019-07-01

如何让子元素在父元素中水平垂直居中七种方法?

YannZoe / 0评论 2019-07-01

纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。top: 0; left: 0; bottom: 0; right: 0

云端漂移 / 0评论 2019-07-01

网页设计的垂直居中

推荐阅读原文原文链接：网页设计的垂直居中此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。

anqier / 0评论 2019-07-01

老生常谈之CSS的垂直居中

“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。”在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align: center; 如果它是一个块级元素，就对它自身应用 m

renpinghao / 0评论 2019-06-30

前端常见问题——安卓文本无法垂直居中

安卓文本无法垂直居中的问题问题安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。<span style=" display: table-cell; font-size: 10px; vertical-alig

yuyu00 / 0评论 2019-06-29

总结：前端开发中让元素水平垂直居中的方法

前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。水平居中text-align：center;这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性tex

kbkiss / 0评论 2019-06-29

一个高度不固定的div，里面的文字如何垂直居中？

我也找了老半天，后来发现一个很强势的写法 简单暴力// 加在父级div中垂直居中：align-items:center; display: -webkit-flex;水平居中：justify-content:center; display: -webkit

FZfeng / 0评论 2018-04-04

解读 CSS 布局之水平垂直居中

text-align是针对父元素进行设置,只能对图片，按钮，文字等行内元素起作用，起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。具体来说就是把要居中的元素的margin-le

hlfsunshine / 0评论 2017-06-23

内部元素横向&&垂直居中的15种常见写法

非常简洁易懂，排名不分先后，开整！

renpinghao / 0评论 2019-06-28

主流的CSS水平和垂直居中技术大全

水平居中行内元素的水平居中text-align:center只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中margin: 0 auto;只对块级元素有效auto指的是自适应宽度。实质就是均分了元素左右的剩余空间，所以元素会居中。但marg

k韶华 / 0评论 2019-06-28

如何使文字在div中水平和垂直居中的css代码

CSS定义字体行间距line-height:xxpx;

zhanghaibing00 / 0评论 2016-10-12

使文字在div中水平和垂直居中

text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX，这样，文字就垂直居中了。<div style="width:200

Ivy / 0评论 2016-08-14

jQuery制作元素在屏幕中水平垂直居中效果

#outer {height: 600px; overflow: visible;width: 100%;position: relative;} /* or without overflow */. #middle {position: absolute

zhangyang0 / 0评论 2016-06-14

CSS实现垂直居中的常用方法

在前端开发过程中，盒子居中是常常用到的。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。下面我们一起来讨论一下实现垂直居中的方法。首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。接下来，需要做

张大晴 / 0评论 2016-04-15

CSS实现垂直居中的常用方法

首先定义一个需要垂直居中的div元素，宽高均设置为200px;

ozhanjun / 0评论 2016-04-13

CSS实现多行文本垂直居中

父元素高度不固定。使用padding样式解决父元素高度固定，假设dom结构如下所示

AnyBisks / 0评论 2019-06-28

解读CSS 布局之水平垂直居中

对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。另外，文中的css都是用less书写的，如果看不懂less，可以把我给的demo链接打开，然后在控制台中查看最终的css，或者是

云端漂移 / 0评论 2016-01-21

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

srchange / 0评论 2015-11-15

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。元素居中，相信作为

MaYangyang / 0评论 2015-10-15