首先是最常用的，利用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. 还原 listagg/wm_concat 后的数据 pack_split_listatt ；

    1.创建表并制作测试数据: --创建测试表 : CREATE TABLE split_table ( NAME ), ID ) ); --准备测试数据 : INSERT INTO split_tabl ...

  2. ETL技术( Extract-Transform-Load) 数据仓库技术-比如kettle

    每次面试,互联网的面试官,经常问我有没有用过ETL,每次我都懵逼,说没用过,觉得是多么高大上的东东,数据仓储 今天查了一下,我晕,自己天天用的Kettle就是最典型的ETL, 可以实现不同数据库之间的 ...

  3. 【前端学习笔记01】JavaScript源生判断数据类型的方法

    原始类型(值类型):Undefined.Null.Number.String.Boolean: 对象类型(引用类型):Object: typeof  可以识别标准类型,null外(返回Object): ...

  4. UVA12585_Poker End Games

    题目是这样的,每个人手中有a和b的钱数,c为a和b中间最小的一个. 每个回合,两个人胜利的概率都是0.5,胜利者从失败者手中获得c的钱数. 如果有一个人手中没钱的话,那么他就failer,游戏结束. ...

  5. 51nod 1821 最优集合(思维+单调队列)

    题意:一个集合S的优美值定义为:最大的x,满足对于任意i∈[1,x],都存在一个S的子集S',使得S'中元素之和为i. 给定n个集合,对于每一次询问,指定一个集合S1和一个集合S2,以及一个数k,要求 ...

  6. Codeforces 786C Till I Collapse

    题意: 给出一个长度为n的序列,每个数值在1-n之间且为整数,现在要把这个序列划分为若干段,使得每一段的颜色种数不超过k,求最少的区间数目.对于从1到n的n种k的取值,分别输出这时的最少区间数目. 分 ...

  7. Django获取多个数据及文件上传

    1. 选择性别: 1)更新login.html模板 2)views.py中获取客户端提交的数据 3)当选择性别为“男”后,后台得到了gender=1. 2.选择爱好,可以多选,所以后台会获得多个数据. ...

  8. C++中关于new及动态内存分配的思考

    如何实现一个malloc? malloc_tutorial.pdf ———————————————————————————————————— 我们知道,使用malloc/calloc等分配内存的函数时 ...

  9. 洛谷 P2659 美丽的序列 解题报告

    P2659 美丽的序列 题目背景 GD是一个热衷于寻求美好事物的人,一天他拿到了一个美丽的序列. 题目描述 为了研究这个序列的美丽程度,GD定义了一个序列的"美丽度"和" ...

  10. HDU.1846 Brave Game (博弈论 巴什博弈)

    HDU.1846 Brave Game (博弈论 巴什博弈) 题意分析 巴什博奕裸题 博弈论快速入门 代码总览 include <bits/stdc++.h> using namespac ...