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的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- 【UNR #1】火车管理（主席树）
[UNR #1]火车管理(主席树) 好好的代码被 \(extra\ test\) 卡常了...我就放一个目前最快的版本吧... 题意简化: 有 \(n\) 个栈,\(m\) 次操作. 将 \(x\) ...
- Mac 下 Gradle 环境配置
1. gradle路径的查找 然后gradle 右键 显示简介 复制下蓝色的 2. 环境变量的配置 在.bash_profile文件中,添加如下图选中内容的配置信息: 执行source .bash_p ...
- 第二十九节：Java基础知识-类，多态，Object，数组和字符串
前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...
- 锚接口(上)——hashchange api 和 $.uriAnchor
概述 这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我 ...
- VRRP&HSRP
HSRP 活跃路由器和备用路由器都会向组播地址 224.0.0.2 UDP 1985 端口发送hello消息. VRRP组中有一台主用路由器(Master),以及一台或多台备用路由器(Backup ...
- 分享一个windows下检测硬件信息的bat脚本
文件名必须以.bat结尾,如果出现闪退,请右击鼠标,以管理身份运行即可 @echo offcolor 0atitle 硬件检测 mode con cols=90sc config winmgmt st ...
- POJ 2909
#include<iostream> #include<stdio.h> #define M 35000 #include<math.h> #define N 38 ...
- 求一个集合的所有真子集 Python
给定一个集合,元素均为正整数且不重复,求该集合的所有子集 # -*- coding: utf-8 -*- """ Created on Tue Oct 10 09:04: ...
- .Net开源myrtille远程连接服务（支持SSH）
今天在博客园首页,无意中看到一篇文章(https://github.com/Microsoft/dotnet/blob/master/dotnet-developer-projects.md),于是对 ...
- Hibernate懒加载解析
Hibernate懒加载解析 在Hibernate框架中,当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,这时Hibernate用懒加载机制来 ...