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的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- kernel解析dtb为节点
title: 解析dtb为节点 date: 2019/4/26 14:02:18 toc: true --- kernel解析dtb为节点 head.s入口传递 回顾 看以前的笔记 kernel(二) ...
- Windows 远程栈溢出挖掘与利用
缓冲区溢出攻击很容易被攻击者利用,因为 C 和 C++等语言并没有自动检测缓冲区溢出操作,同时程序编写人员在编写代码时也很难始终检查缓冲区是否可能溢出.利用溢出,攻击者可以将期望数据写入漏洞程序内存中 ...
- [Swift]正则表达式工具类
正则表达式工具类 import Foundation //基于NSRegularExpression api 的正则处理工具类 public struct Regex { private let re ...
- ubuntu root默认密码（初始密码）
ubuntu安装好后,root初始密码(默认密码)不知道,需要设置. 1.先用安装时候的用户登录进入系统 2.输入:sudo passwd 按回车 3.输入新密码,重复输入密码,最后提示passwd ...
- Redis 分布式锁进化史（解读 + 缺陷分析）
Redis分布式锁进化史 近两年来微服务变得越来越热门,越来越多的应用部署在分布式环境中,在分布式环境中,数据一致性是一直以来需要关注并且去解决的问题,分布式锁也就成为了一种广泛使用的技术,常用的分布 ...
- 【微服务】.netCore eShopOnContainers 部署实践《一》
官方说明文档 -------------------------------------------------------------- # eShopOnContainers - Microser ...
- Ubuntu 16.04 安装 arm-linux-gcc 交叉编译工具
工作需要,最近在编译linux嵌入式内核时,需要安装arm-linux-gcc交叉编译,实际上,安装这个交叉编译器的难度没啥.不过,这里有些问题还是值得我去思考和记录下来的. 这个系统的上的编译器用的 ...
- HW2017笔试编程题
一.写一个转换字符串的函数 1.题目描述 将输入字符串中下标为偶数的字符连成一个新的字符串输出,需要注意两点: (1)如果输入字符串的长度超过20,则转换失败,返回“ERROR!”字符串: (2)输入 ...
- 关于JAVAweb的一些东西
1.Servlet 1.Servlet访问URL映射配置 <servlet> <servlet-name>ServletDemo1</servlet-name> & ...
- Vim 利剑常磨，见血封喉
年底了,故事总是会有很多. 刚了一波通宵加班,趁着有时间,过了一遍Vim教程,顺便汇总下常用命令. 对于以 OSX / Linux为开发环境的伙伴们,应该并不陌生.因其轻便,扩展性,可定制化,一直很受 ...