首先是最常用的，利用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. tftp 简要使用说明

    yum 安装:tftp    tftp-server (2)启动tftp   CentOS 6 service xinetd restart chkconfig tftp on     CentOS ...

  2. Kotlint集合简单总结

    1.数组操作 var testArray = Array<>("s","ss")或者 = arrayOf("s","s ...

  3. Web前端面试宝典（最新）

    第一部分:HTML问答题   1.简述一下你对HTML语义化的理解? 用正确的标签做正确的事情. html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析;即使在没有样式CSS情况下也 ...

  4. bzoj4568-幸运数字

    题目 给出一棵树,每个节点上有权值\(a_i\),多次询问一条路径上选择一些点权值异或和最大值.\(n\le 2\times 10^4,q\le 2\times 10^5,0\le a_i\le 2\ ...

  5. BZOJ4939 Ynoi2016掉进兔子洞（莫队+bitset）

    容易发现要求三个区间各数出现次数的最小值.考虑bitset,不去重离散化后and一发就可以了.于是莫队求出每个区间的bitset.注意空间开不下,做多次即可.输出的东西错了都能调一年服了我了. #in ...

  6. Ubuntu下搭建FTP服务器图解

    在Linux中ftp服务器的全名叫 vsftpd,我们需要利用相关命令来开启安装ftp服务器,然后再在vsftpd.conf中进行相关配置,下面我来介绍在Ubuntu中vsftpd安装与配置增加用户的 ...

  7. 转：linux命令: tail ,head 显示文件某行内容 与sed在线编辑器

    linux 如何显示一个文件的某几行(中间几行) 转:http://www.cnblogs.com/xianghang123/archive/2011/08/03/2125977.html http: ...

  8. 解题：由乃OI 2018 五彩斑斓的世界

    题面 写在前面的扯淡: 分块的总体学习告一段落,这算是分块集中学习的最后一题么:以后当然也可能会写,就是零零散散的题了=.= 在洛谷上搜ynoi发现好像只有这道题和 由乃OI 2018 未来日记 是分 ...

  9. 洛谷P1029 最大公约数和最小公倍数问题

    题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...

  10. mysql5.7主从(Master/Slave)同步配置

    环境: mysql版本都是5.7(以前的版本配置可能不一样) 主(Master) windows:192.168.0.68 从(Slave) centos7:192.168.0.4 基本环境配置: 要 ...