CSS 小技巧1——水平居中和垂直居中的方法

原创 2015年07月08日 13:54:41

一、水平居中的方法

  1. 行内元素:最简单的就是加上 text-align:center 属性。

  2. 块状元素:

2.1 对于宽度确定的块级元素,可以加上margin: 0 auto ; 属性,这样浏览器就会自动实现水平居中。不过,像分页这种不知道宽度的情况下,这种方法却不怎么适用。
        div{
                width: 500px;
                margin: 0 auto;
                background-color: #ff9999;
        }
2.2 对于宽度不确定的块级元素,有三种方法可以实现水平居中
  • 加入 table 标签
  • 将块级元素设置成行内元素,再用 text-align属性

  • 用浮动的方法实现水平居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
     div{
        position: relative;
        left: 50%;
        background-color: #ff9999;
    }
    </style>
</head>
<body>
    <div>
        <p>这是一行文本</p>
    </div>
</body>
</html>

二、垂直居中的方法

  1. 对于单行文本,设置 height 和 line-height 一致
div{
                background-color: #ff9999;
                height: 500px;
                line-height: 500px;
        }
  1. 对于多行文本,
2.1 将 div 放在 table 标签内,td 标签内的 vertical-align:middle 会实现垂直居中。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
     table{
        background-color: #ff9999;
        height: 500px;
    }
    </style>
</head>
<body>
<table><tbody><tr><td>
    <div>
        <p>这是一行文本</p>
        <p>这是一行文本</p>
        <p>这是一行文本</p>
        <p>这是一行文本</p>
    </div>
</td></tr></tbody></table>
</body>
</html>
2.2 设置display:table-cell,激活属性,不过这种方法只支持 ie8及以上 chrome、firefox等、
         div{
                background-color: #ff9999;
                height: 500px;
                display: table-cell;
                vertical-align: middle;
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS——几种让一个容器水平垂直居中的方法

让一个容器水平垂直居中有多种方法,下面介绍简单的几种:方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:...

CSS实战技巧:图片(大小不固定)的水平垂直居中

1.display:inline-block和文字大小控制居中如果图片和文本处于一行时,可采用这种方法。 html代码 关注我们: css代码.box { ...

CSS实现元素水平/垂直居中的方法

首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1.    在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: body{     width:...

CSS使元素水平垂直居中的方法

1、使用绝对定位(position)和外边距(margin)       适用范围:子级元素(content)宽高固定       方法:(1)将父级 (box)设置成相对定位(relative);(...

收罗CSS布局中有关水平和垂直居中的N种方法

先来说说水平居中。  CSS水平居中的方法:  1、最常见的margin方法:  给元素设置一个显示式的宽度,然后加上margin的左右值为auto,示例:  复制代码...

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

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

使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?

解决这个问题有多种方法 1.使用css hack 处理ie6下的问题。 2.嵌入其它标签使其垂直居中。 方法一:  .box {             /*非IE的主流浏览器识别的...

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

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...

css让div在整个网页水平、垂直居中解决方法

css让div在整个网页水平、垂直居中解决方法废话不说,直接上最终代码。 .div-out{ position: absolute; left:50%...

css中已知宽高的子元素水平垂直居中的三种方法

css中子元素水平垂直居中三种的方法
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 小技巧1——水平居中和垂直居中的方法
举报原因:
原因补充:

(最多只允许输入30个字)