CSS中经常会用到元素居中，那么今天我为大家分享几种水平居中的方法，下面代码都可以达到同样的居中效果，来不及解释了，快上马（码）：

一、margin : 0 auto;

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background: pink;

        }

        p {

            width: 50px;

            height: 50px;

            background: red;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

    </div>

</body>

此种方法适用于块级标签在父级块标签内使用；

注意事项：父级标签必须是块级标签。如果父级不设宽度，body 内一级元素默认为浏览器宽度。

二、position+margin ;

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div,

        p {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

            background: pink;

            position: relative;

        }

        p {

            width: 50px;

            height: 50px;

            background: red;

            position: absolute;

            top: 0;

            left: 25px;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

    </div>

</body>

此种方法运用相对定位实现：定位脱离文档流，不占用宽高；

注意事项：父级元素必须要给相对属性： Position: relative; 。

三、position+margin （百分比）;

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div,

        p {

            margin: 0;

            padding: 0;

        }

        div {

            width: 100px;

            height: 100px;

            background: pink;

            position: relative;

        }

        p {

            width: 50px;

            height: 50px;

            background: red;

            position: absolute;

            top: 0;

            left: 50%;

            margin-left: -25px;

        }

    </style>

</head>

<body>

    <div>

        <p></p>

    </div>

</body>

此种方法主要适用于浏览器通栏定位；

注意事项：position 定位 left：50%，需要向左移动宽度一半的距离。

CSS水平居中的三种方法的更多相关文章

  1. 清楚css浮动的三种方法

    第一种:添加新元素,应用clear:both;  <div class="clear"></div> css样式:clear:both; 第二种:在浮动元素 ...

  2. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  3. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  4. css 清楚浮动三种方法

    我们可以看到这样一个布局: <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: le ...

  5. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

  6. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  7. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  8. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

  9. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

随机推荐

  1. c++ 异常处理（2）

    前面一篇博文简单介绍了 c++ 异常处理的流程,但在一些细节上一带而过了,比如,_Unwind_RaiseException 是怎样重建函数现场的,Personality routine 是怎样清理栈 ...

  2. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  3. Jmeter HTTP请求后响应数据显示乱码解决方法

    Jmeter请求后结果树里无论是text还是html响应数据显示乱码,这是因为jmeter 编码格式配置文件默认不开启导致的,解决方法如下: 1)进入jmeter-***\bin目录下,找到jmete ...

  4. 第六篇: 分布式配置中心(Spring Cloud Config)

    一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件. 在Spring Cloud中,有分布式配置中心组件spring cloud confi ...

  5. ubuntu 16.04 下更换boost版本

    如果是新机器,没装过boost,那么直接一条命令 sudo apt-get install libboost-all-dev 头文件一般安装在 /usr/include 下面有一个目录boost,里面 ...

  6. python实现归并排序算法

    归并排序(英语:Merge sort,或mergesort),是创建在归并操作上的一种有效的排序算法,效率为O(nlogn). 1945年由约翰·冯·诺伊曼首次提出.该算法是采用分治法(Divide ...

  7. 简介 - RESTful

    RESTful REST(Representational State Transfer,表现层状态转化),可以简单理解为"资源在网络中以某种表现形式进行状态转移" Resourc ...

  8. oracle中常用的对用户的操作

    创建用户:create user usr1 identified by pwd default tablespace ts1 temporary tablespace tmp; 删除用户:drop u ...

  9. js按钮 防重复提交

    给html 按钮加id属性   例: <button id="addBtn"  onclinck="check()">  </button&g ...

  10. 使用jdk的keytool 生成CA证书的方法

    一.CA证书生成设置总共分为以下5步: 步骤: 1.根据java的keytool生成CA根证书,放在服务器 2.根据服务器CA根证书导出客户端证书 3.tomcat增加SSL配置 4.客户端IE浏览器 ...