首先是最常用的，利用margin属性的auto来进行水平居中

margin: 0 auto;

其中0是指上下的margin，auto是左右的margin，margin这个属性的简写是按顺时针走的，也就是上、右、下、左。当参数为两个的时候第一个代表上下，第二个代表左右。

注意容器一定要有宽度才能使用这种方法。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #container{

            width: 960px ;

            height: 500px ;

            background-color: red ;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div id="container"></div>

</body>

</html>

第二种姿势，利用绝对布局和偏移量

position: absolute;
left: 50% ;
margin-left: -480px ;//你的容器宽的一半

在绝对布局下，容器的位置是相对于第一个有定位的父元素，如果没有就到body元素，在绝对布局下可以用left，top，right，bottom来调整位置。

位置可以是px的长度也可以是百分比，当是百分比的时候是表示容器的那一边（比如left就是左边）相对于父元素长度半分比的位置。

所以当设置了left：50%后容器的左边到了父元素中间的位置，那么我们只要再向左平移半个容器的宽度就可以让容器居中。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #container{

            width: 960px ;

            height: 500px ;

            background-color: red ;

            position: absolute;

            left: 50% ;

            margin-left: -480px ;

        }

    </style>

</head>

<body>

    <div id="container"></div>

</body>

</html>

第三种姿势，利用text-algin：center和display：inline-block

text-align: center;

display: inline-block;

注意text-align是父级上面的。

容器内的元素设置了display：inline-block之后，他们的部分表现就和行内元素一样，所以可以利用text-align：center让其居中。

这样就很好的解决了不知道子元素宽度的问题。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        #container{

            text-align: center;

        }

        .block{

            display: inline-block;

            width: 100px ;

            height: 100px ;

            background-color: red ;

        }

    </style>

</head>

<body>

    <div id="container">

        <div class="block">1</div>

        <div class="block">2</div>

        <div class="block">3</div>

    </div>

</body>

</html>

第四种姿势，流布局

如果有三个容器，左右两边的容器没有背景自适应宽度且等宽，那么中间的元素不就相当于居中了么。

用流布局就可以做到这样的效果，给父元素设置display：flex后给两边的子元素设置相同的flex（你可以理解为权重，权重一样平分没有定义的空间）

注意父元素设置display：flex以后子元素的float，vertical-align，clear属性失效。流式布局默认是水平的，可以利用flex-direction来改变方向。

关于flex布局想更深入学习请看右边的链接  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        html,body{

            height: 100% ;

            width: 100% ;

        }

        #container{

            display: flex ;

            height: 100% ;

            width: 100% ;

        }

        .side{

            flex:1;

            height: 100% ;

        }

        .center{

            width: 960px ;

            height: 100% ;

            background-color: red ;

        }

    </style>

</head>

<body>

    <div id="container">

        <div class="side"></div>

        <div class="center"></div>

        <div class='side'></div>

    </div>

</body>

</html>

注意在严格模式下这句是不能少的，因为严格模式下容器不知道父元素的长宽是多少，会导致没有高度和宽度。

html,body{

        height: 100% ;

        width: 100% ;

}

css各种姿势的水平居中的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. CSS布局：元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  3. css知识笔记：水平居中（别只看，请实操！！！）

    css实现元素的水平居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  4. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  5. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  6. 纯CSS完美实现垂直水平居中的6种方式

    前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...

  7. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  8. css中设置div水平居中，margin:0px auto无用的情况

    在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...

  9. 【css】图片垂直水平居中

    一.已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. Hibernate（八）

    三套查询之Criteria查询 完全面向对象的,不需要写任可查询语句. 1.查询所有的学生 //1.查询所有的学生 @Test public void test1(){ Criteria criter ...

  2. css选择器和新增UI样式总结

    经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.

  3. Alpha阶段事后诸葛亮分析

    事后诸葛亮分析 一.设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件可供各类人群闲暇时间消遣娱乐,锻炼脑力. 定义的很清楚,就是一个定位 ...

  4. Hadoop环境搭建(三)

    长久没用了,再次登陆Ubuntu的时候提醒密码错误,然后就进入了guest session,依然可以进入系统进行工作但身份是guest,于是开始了找回密码的漫漫长路. 首先,在guest模式下,右上角 ...

  5. 【Linux】- 六个超赞的字符画生成器

    ASCII是一个非常吸引人的字符编码系统,在计算机,通讯设备,以及其他设备中,通过它来用代码表示字符.新生代的人可能会觉得它已经过时了,但是那些熟悉它的人会懂得ASCII是多么的独特.我们在这里为你准 ...

  6. virtualenv是什么?virtualenv的安装及pycharm的配置和使用

    virtualenv是什么? virtualenv是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.简单的说就是一 ...

  7. SQL Server Management Studio（SSMS）的使用与配置整理

    目录 目录 SQL Server Management Studio的使用与配置 1 设置SSMS显示行号 2 添加注释与取消注释的快捷键 3 新建查询的快捷键 4 开启sql语句TIME与IO的统计 ...

  8. 【.Net】Net开发

    博客里的好多文章都是本人看着比较好,就转过来的,好少自己亲自去写点什么,也很少把自己学的一点心得于大家分享,今天特别想聊一下,关于本人做Net开发时的那段回忆! 一.关于知识的回忆 还记得Handle ...

  9. 【bzoj3992】[SDOI2015]序列统计 原根+NTT

    题目描述 求长度为 $n$ 的序列,每个数都是 $|S|$ 中的某一个,所有数的乘积模 $m$ 等于 $x$ 的序列数目模1004535809的值. 输入 一行,四个整数,N.M.x.|S|,其中|S ...

  10. android面试(3)---基本问题

    1.值类型,引用类型? 基本数据类型都是值类型:byte,short,int,long,float,double,char,boolean 其他类型都是引用类型. 引用类型在传入方法是,方法内部对引用 ...