龙空技术网

CSS 垂直居中方法汇总

寒笛过霜天 48

前言:

目前各位老铁们对“css实现单行文字的垂直水平居中”大概比较关怀,看官们都需要学习一些“css实现单行文字的垂直水平居中”的相关资讯。那么小编也在网络上网罗了一些对于“css实现单行文字的垂直水平居中””的相关知识,希望同学们能喜欢,各位老铁们一起来学习一下吧!

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码:

<div class="container">hi,imooc!</div>

css代码:

<style>    .container{    height:100px;    line-height:100px; /* 仅能用于单行文本 */    background:#999;}</style>

垂直居中-图片以及行内块元素

<div class="container"><img src="imgegs/icon.png" /></div>

css代码:

<style>.container{    height:100px;    background:#999;}.container img{    vertical-align:middle;}</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:

方法一:使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align:middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。

下面看一下例子:

html代码:

<body><table><tbody><tr><td class="wrap"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div></td></tr></tbody></table></body>

css代码:

table td{height:500px;background:#ccc}

因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。

html代码:

<div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div></div>

css代码:

<style>.container{    height:300px;    background:#ccc;    display:table-cell; /*IE8以上及Chrome、Firefox*/    vertical-align:middle; /*IE8以上及Chrome、Firefox*/}</style>

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 400px;    height: 300px;    background-color: orange;}/** 思路一:left:50%;top:50%;margin-left: -200px;margin-top: -150px;* 思路二:left:0;top:0;right:0;bottom:0;margin:auto;* */div{    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%); /* 平移 */}</style></head><body><div></div></body></html>

实例1:将内层div的文本垂直居中

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>父元素高度确定的多行文本</title><style>.container{    height:300px;    background:#ccc;    display:table-cell; /*IE8以上及Chrome、Firefox*/    vertical-align:middle; /*IE8以上及Chrome、Firefox*/}</style></head><body><div class="container"><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p></div></div><!--下面是代码任务区--></body></html>

实例2:将内层垂直居中、外层水平居中

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#content{    width:300px;    height:300px;    border:#000 solid 1px;    margin:auto;    display:table;}#wenzi{    border:#F00 solid 1px;    text-align:center;    display:table-cell;    vertical-align: middle;}</style></head><body><div id="content"><div id="wenzi">锄禾日当午,<br>汗滴禾下土。<br>谁知盘中餐,<br>粒粒皆辛苦。<br></div></div></body></html>

实例3: 使用绝对定位垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 220px;    height: 280px;    background: url("img/王思聪.jpg");    position: absolute;    left: 50%;    top: 50%;    margin-left: -110px;    margin-top: -140px;}</style></head><body><!--行内元素(文本)->水平垂直居中text-align: center;line-height: height;--><!--块元素->水平垂直居中margin: 0 auto;--><div></div></body></html>

实例4: 使用绝对定位垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 600px;    height: 200px;    padding: 10px 20px;    border: 1px solid #000;    border-radius: 5px;    /* 下面这种写法也可以让一个盒子居中 */    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;}</style></head><body><div>您确定删除:重庆万州公交坠江事件结果公布后,司乘纠纷和公交驾驶安全问题成为人们热议的焦点,如何预防和避免恶性结果的发生,才是问题的关键。“鼓励市民举报,并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午,西安市公安局公共交通分局召开媒体通气会,通报西安相关安全举措。这条消息吗</div></body></html>

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。

解决办法:left:50%; margin-left:负的宽度的一半。(三句话)

div{width: 600px;height: 60px;position: absolute;  /* → 第一句  */left: 50%;   //   /*  → 第二句   */ top: 0;margin-left: -300px;    /*→ 第三句。宽度的一半*/}

实例4:使用绝对定位和margin:auto垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 600px;    height: 200px;    padding: 10px 20px;    border: 1px solid #000;    border-radius: 5px;    /* 下面这种写法也可以让一个盒子居中 */    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;}</style></head><body><div>您确定删除:重庆万州公交坠江事件结果公布后,司乘纠纷和公交驾驶安全问题成为人们热议的焦点,如何预防和避免恶性结果的发生,才是问题的关键。“鼓励市民举报,并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午,西安市公安局公共交通分局召开媒体通气会,通报西安相关安全举措。这条消息吗</div></body></html>

标签: #css实现单行文字的垂直水平居中 #html纵向居中 #css文字竖直显示