CSS水平居中的三种方法
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水平居中的三种方法的更多相关文章
- 清楚css浮动的三种方法
第一种:添加新元素,应用clear:both; <div class="clear"></div> css样式:clear:both; 第二种:在浮动元素 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- css 清楚浮动三种方法
我们可以看到这样一个布局: <style> .left{ width: 200px; height: 200px; background-color: #00ee00; float: le ...
- HTML页面中插入CSS样式的三种方法
1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...
- 使用CSS样式的三种方法
一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- 设置css三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- Swift5 语言指南(十五) 继承
类可以从另一个类继承方法,属性和其他特性.当一个类继承自另一个类时,继承类称为子类,它继承的类称为其超类.继承是一种基本行为,它将类与Swift中的其他类型区分开来. Swift中的类可以调用和访问属 ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 4.镜像服务（glance）
节点配置信息说明: 控制节点:controller: IP:192.168.164.128 hostname&hosts:likeadmin 计算加点:Nova: IP:192.168.164 ...
- shell 脚本中的当前工作目录等于执行脚本时所在的工作目录
1. 测试脚本 在当前目录下创建 h1 h2两个文件夹 2. 在脚本所在目录执行脚本 在当前目录下创建了h1 h2两个目录 3. 在其他目录爱=下执行脚本 在其他目录下执行脚本时,在执行脚本所在的目录 ...
- Apple Watch笔记－应用内导航模式
最近苹果婊上市,水果也发布了Xcode 6.2正式版,WatchKit也可以正常使用了.水果很及时地提供了Apple Watch的开发文档,我也及时地尝试着边学习边开发Watch App. 今天主要想 ...
- Java架构师最关键三个思维转变方式，框架的合理运用
很久没有写思维的文章,特别是在写完思维的逻辑和思维的框架后,对于理论层面的自己也不太想写,但是对于实际案例层面的写起来又比较花时间,而且案例基本在IT专业领域不是所有人都能看明白. 我们前面写过思维的 ...
- WebSocket connection to 'ws://xx:9502/' failed:Error in connection establishment:net::ERR_CONNECTION_TIMED_OUT
1.首先看能否ping通服务器 2.telnet xx 9502之后能不能连通 3.如果连不通有可能是防火墙的问题 可以试试清空防火墙规则,或者关闭防火墙 iptables -F
- LDA-线性判别分析（四）其他几个相关问题
本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...
- QC内部分享ppt
Quality Center是一个基于Web的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,包括制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以创建报 ...
- ADSL 动态IP拨号VPS 软件配置
http://yun.baidu.com/share/link?uk=2520566727&shareid=330788421&third=0&adapt=pc&fr= ...
- Node.js开发框架Express4.x
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...