首先是最常用的，利用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. java分页算法

    int totalPageNum = (totalRecord  +  pageSize  - 1) / pageSize;

  2. php关于static和self的一点理解

    在使用和学习laravel的过程中,总会看到类似与static::methods或者static::variable的使用方式,对此感觉到疑惑和不解,后来查阅了相关的资料才知道他是php5.3之后新加 ...

  3. jdk&tomcat环境变量配置及同时运行多个tomcat方法

    一:jdk配置 安装jdk1.7.0_51,安装过程中所有选项保持默认:最后配置 JDK的环境变量: 在“我的电脑”上点右键—>“属性”—>“高级”—>“环境变量(N)”. 1.新建 ...

  4. [Google] 看雪论坛: 安卓碎片化的情况

    2018年10月28日早间消息,谷歌方面发布了Android各版本的最新份额数据,截止到10月26日.即便是已经推出3个月了,Android 9 Pie系统的用户数仍旧没有超过0.1%,导致未出现在榜 ...

  5. mysql中用户和权限

    用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中——不管哪个数据库的用户,都存储在这里. 表初始内容如下: 创建用户: 形式: create   ...

  6. Vue.js 上传文件(后台使用.net)

    页面部分 <div id="app"> <form id="myform"> <input type="file&quo ...

  7. 【bzoj2669】[cqoi2012]局部极小值 容斥原理+状压dp

    题目描述 有一个n行m列的整数矩阵,其中1到nm之间的每个整数恰好出现一次.如果一个格子比所有相邻格子(相邻是指有公共边或公共顶点)都小,我们说这个格子是局部极小值. 给出所有局部极小值的位置,你的任 ...

  8. [您有新的未分配科技点] 无旋treap：从单点到区间（例题 BZOJ1500&NOI2005 维护数列 ）

    1500: [NOI2005]维修数列 Time Limit: 10 Sec  Memory Limit: 64 MB Description Input 输入的第1 行包含两个数N 和M(M ≤20 ...

  9. 洛谷P4630 [APIO2018] Duathlon 铁人两项 【圆方树】

    题目链接 洛谷P4630 题解 看了一下部分分,觉得树的部分很可做,就相当于求一个点对路径长之和的东西,考虑一下能不能转化到一般图来? 一般图要转为树,就使用圆方树呗 思考一下发现,两点之间经过的点双 ...

  10. NOIP2017 Day1 T3 逛公园（最短路+拓扑排序+DP）

    神tm比赛时多清个零就有60了T T 首先跑出1起点和n起点的最短路,因为k只有50,所以可以DP.设f[i][j]表示比最短路多走i的长度,到j的方案数. 我们发现如果在最短路上的和零边会有后向性, ...