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. Linux开机执行指定shell

    目的:希望linux在开机或重启后第一时间启动部分服务或者执行特定脚本 1.需要在/etc/init.d/目录下建立对应的shell脚本,示例如下: 开机启动docker-compose中的所有容器 ...

  2. USB插入电脑的硬件检测和枚举流程

    USB协议定义了设备的6种状态,仅在枚举过程种,设备就经历了4个状态的迁移:上电状态(Powered),默认状态(Default),地址状态(Address)和配置状态(Configured)(其他两 ...

  3. Liferay7 BPM门户开发之25: Liferay7应用程序配置（APPLICATION CONFIGURATION）

    首先有几个概念需要明确.1.第一个概念是这里的应用程序配置不是写XML之类的配置文件,是类似字典的类型化配置这意味着应用程序配置不只是一个字符串键值对的列表.值还可以有类型,如整数列表,字符串列表,一 ...

  4. 【原创】InputStream has already been read - do not use InputStreamResource if a stream needs to be read multiple times

    一.背景 基于SpringBoot 构建了一个http文件下载服务,检查tomcat access 发现偶尔出现500 状态码的请求,检查抛出的异常堆栈 2019-03-20 10:03:14,273 ...

  5. django权限管理(Permission)

    什么是权限管理 权限管理,一般指根据系统设置的安全规则或者安全策略,用户可以访问而且只能访问自 己被授权的资源 权限管理好比如钥匙,有了钥匙就能把门打开,但是权限设置是有级别之分的,假如这个 系统有多 ...

  6. [视频]K8飞刀 BadUSB Teensy自动种马演示教程

    [视频]K8飞刀 Teensy USB自动种马演示教程 链接: https://pan.baidu.com/s/13bM1XSLrhlf90FDmPGfo1g 提取码: gy2q 源码:https:/ ...

  7. 设置c++中cout输出的字体颜色

    在c++中控制台的默认字体颜色是白色,但是有时我们需要其他颜色,比如用红色提示错误,使用绿色提示计算完成,使用黄色表示警示等等,那么如何设置控制台文字的颜色呢? 一种方法是通过右键控制台进行颜色设置, ...

  8. Spring Boot初识（4）- Spring Boot整合JWT

    一.本文介绍 上篇文章讲到Spring Boot整合Swagger的时候其实我就在思考关于接口安全的问题了,在这篇文章了我整合了JWT用来保证接口的安全性.我会先简单介绍一下JWT然后在上篇文章的基础 ...

  9. js仿qq分组折叠效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. 一句命令修复Xcode6.2插件失效的问题

    Xcode升级到6.2之后XVim无法使用了. 打开终端输入: find ~/Library/Application Support/Developer/Shared/Xcode/Plug-ins - ...