首先是最常用的，利用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. 设计模式PHP篇（三）————适配器模式

    简单的适配器模式: interface Adaptor { public function read(); public function write(); } class File implemen ...

  2. 关于SIGPIPE信号

    对一个对端已经关闭的socket调用两次write, 第二次将会生成SIGPIPE信号, 该信号默认结束进程.具体的分析可以结合TCP的"四次握手"关闭. TCP是全双工的信道, ...

  3. solrCloud源码分析之CloudSolrClient

    CloudSolrClient是solrj提供的客户端与solrCloud交互的类.该类的实例与zookeeper进行通信来确定solrCloud collections中的solr endpoint ...

  4. Golang基础（一）

    1. 变量声明与赋值 // var.go package main import "fmt" var a string var b bool var c string = &quo ...

  5. [Violet]蒲公英 分块

    发现写算法专题老是写不动,,,, 所以就先把我在luogu上的题解搬过来吧! 题目大意:查询区间众数,无修改,强制在线 乍一看是一道恐怖的题,仔细一看发现并没有那么难: 大致思路是这样的,首先我们要充 ...

  6. 【LOJ6436】【PKUSC2018】神仙的游戏（NTT）

    [LOJ6436][PKUSC2018]神仙的游戏(NTT) 题面 LOJ 题解 看到\(zsy\)从\(PKUSC\)回来就秒掉了这种神仙题 吓得我也赶快看了看\(PKUSC\)都有些什么神仙题 然 ...

  7. 【NOI2006】聪明的导游

    [NOI2006]聪明的导游 题面 洛谷 题目描述 小佳最近迷上了导游这个工作,一天到晚想着带游客参观各处的景点.正好 M 市在举行 NOI,来参观的人特别的多.不少朋友给小佳介绍了需要导游的人. M ...

  8. HSTS的来龙去脉

    前言 安全经常说“云.管.端”,“管”指的是管道,传输过程中的安全.为了确保信息在网络传输层的安全,现在很多网站都开启了HTTPS,也就是HTTP+TLS,在传输过程中对信息进行加密.HTTPS使用了 ...

  9. mysql数据库----下载安装、操作

    一.mysql概述 1.什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL ...

  10. laravel调试神器tinker

    一直以来,想调试框架中的某些东西,如想知道 Elpquent 的 create 方法返回值是个什么东西, 以前的话,应该就是在 create 方法调用之后,使用 dd 或者 var_dump 之类的函 ...