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的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- Python PIL 库的应用
PIL (Python Image Library) 库是Python 语言的一个第三方库,PIL库支持图像存储.显示和处理,能够处理几乎所有格式的图片. 一.PIL库简介 1. PIL库主要有2个方 ...
- Matlab实现《追光者》简谱
MATLAB除了生孩子,其他全都能做系列. 使用MATLAB进行播放<追光者>,纯文本内容哦. Fs = ; load y; sound(y, Fs); 加载的y是哪里来的呢?当然是调用函 ...
- Rip配置
Rip配置 首先建立如图拓扑图 分别配置两台电脑的ip地址和子网掩码和网关.如图所示. 在router0上配置两个端口的IP以及子网掩码 在路由器router0上配置rip2协议.里面的no auto ...
- Django --需求文件requirements.txt
在虚拟环境中使用pip生成: (venv) $ pip freeze >requirements.txt 当需要创建这个虚拟环境的完全副本,可以创建一个新的虚拟环境,并在其上运行以下命令: (v ...
- SQL Server性能优化（15）选择合适的索引
一.关于聚集索引列的选择(参考) 1. 聚集索引所在的列,或者列的组合最好是唯一的. 当我们创建的聚集索引的值不唯一时,SQL Server则无法仅仅通过聚集索引列(也就是关键字)唯一确定一行.此时, ...
- Orange——开源机器学习交互式数据分析工具
Orange为新手和专家提供开源机器学习和数据可视化.使用大型工具箱交互式数据分析工作流程. 交互式数据可视化 Orange的全部内容都是关于数据可视化,帮助发现隐藏的数据模式,提供数据分析过程背后的 ...
- Java NIO中的缓冲区Buffer（一）缓冲区基础
什么是缓冲区(Buffer) 定义 简单地说就是一块存储区域,哈哈哈,可能太简单了,或者可以换种说法,从代码的角度来讲(可以查看JDK中Buffer.ByteBuffer.DoubleBuffer等的 ...
- C++学习总结（2）
1.const指针 指向常量的指针变量,其一般形式为 "const 类型名 * 指针变量名 " . 如下: int a=12,b=15; const int *p=&a; ...
- 深度学习论文翻译解析（二）：An End-to-End Trainable Neural Network for Image-based Sequence Recognition and Its Application to Scene Text Recognition
论文标题:An End-to-End Trainable Neural Network for Image-based Sequence Recognition and Its Application ...
- macOS 系统 .DS_Store 文件详解
.DS_Store 文件 .DS_Store 是 Finder 用来存储这个文件夹的显示属性的:比如文件图标的摆放位置. 显示/隐藏 Mac 隐藏文件 显示:defaults write com.ap ...