一、水平居中:行内元素解决方案

居中元素:文字、链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)
解决方案:将inline元素包裹在一个display属性为block的父级元素中,如div、nav,设置父级元素属性text-align:center属性即可。 

HTML
<div>文字元素</div>

<nav>
  <a href="">链接元素01</a>
  <a href="">链接元素02</a>
  <a href="">链接元素03</a>
</nav> 
CSS 
nav, div{
  text-align: center;
}
二、水平居中:块状元素解决方案
居中元素:块状元素,如div,p,section等元素,即display属性为block的元素
解决方案:添加margin-left,margin-right属性值为auto即可,如:margin:0 auto;
注意:需要居中的块状元素需有固定的宽度,否则无法实现居中,因为占据100%的宽度。
HTML
<div class="center">水平居中的块状元素</div>
<p class="center">水平居中的块状元素</p>
CSS 
div, p{
    width: 200px;  /*需要设置元素的宽度值*/
    height: 150px;
    color:#fff;
    background: #222;
}
.center {
    margin: 10px auto;
}
三、水平居中:多个块状元素的解决方案
居中元素:“多个块状元素”水平横向排列居中
解决方案:设置这几个块状元素的display属性为inline-block,并且设置父元素的text-align属性为center即可。 
注意:如果要实现这几个块状元素的垂直居中,使用上一节中的margin:0 auto属性 即可。 
HTML
<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>

CSS

body {
    text-align: center;
}
/*页面美化元素*/
div {
    width: 100px;
    padding: 10px;
    height: 50px;
    background-color: #222;
    color: #fff;
}
.center {
    display: inline-block;
}
四、水平居中:多个块状元素解决方案(使用flex布局实现)
居中元素:多个块状元素水平横向排列居中(使用flex布局实现)
解决方案:将多个块状元素的父级元素的display属性设置为flex,并设置justify-content:center即可。
HTML
CSS 
body {
    display: flex;
    justify-content: center;
} /*页面美化元素*/
div{
    width: 100px;
    height: 50px;
    color:#fff;
    background: #222;
    margin: 10px;
    padding: 10px;
}

CSS 水平居中的更多相关文章

  1. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  2. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  3. css水平居中,竖直居中技巧(二)

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  4. css水平居中,竖直居中技巧(一)

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  5. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  6. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  7. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  8. CSS 水平居中/布局 垂直居中 (月经问题)

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...

  9. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

随机推荐

  1. flexbox弹性伸缩布局

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  2. git 命令行操作

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 这里说一下在命令行对git进行操作 git init [在本地初始化一个git库] //当你的git服务器里面已经有文 ...

  3. C# Socket编程(5)使用TCP Socket

    TCP 协议(Transmission Control Protocol,传输控制协议)是TCP/IP体系中面向连接(connection oriented)的传输层(transport layer) ...

  4. opencl gauss filter优化(三)

    1.根据前两次的最终结果: 使用普通buffer,Horizontal 5ms, Vertical 17 ms 使用image buffer:Horizontal 9.4ms, Vertical 6. ...

  5. request获取ip数据

    http://www.cnblogs.com/icerainsoft/p/3584532.html

  6. drupal_get_path_alias

    drupal_get_path_alias('path','language')这个函数是去读取url_alias表,获得某个path在特定language下的alias列的值--刚开始我 dpm(d ...

  7. OI中的代码调试

    作为一位OIer,代码调试的能力必不可少. 今天梳理一下自己进行代码调试的方法,下面只是一些个人的总结. 代码的评价有三部分: 正确性 强健性 高效性 检查也应该从这三部分出发. [正确性] 打完代码 ...

  8. C#读写EXCEL

    using System; using System.Collections; using System.Configuration; using System.Data; using System. ...

  9. C#中的ManagementClass类

    C# 提供了ManagementClass类来获取本机的一些基本信息,比如CPU的个数,CPU的频率,网卡的MAC,内存的大小,硬盘的大小等. 获取本机MAC地址: /// <summary&g ...

  10. 30-Razor语法基础

    以往开发ASP.NET Web Form时,在ASPX页面上都会出现许多夹杂C#/VB.NET与HTML的情况,而先前使用<%...%>这种传统圆角括号的表示法会让HTML标签与ASP.N ...