CSS的水平居中和垂直居中
水平居中如果不太熟悉盒子模型的话属实不太好理解，其实就是控制其他属性来让border之内的内容被控制在父容器中间就行了，最经典的就是使用{margin： 0 auto}了，控制其上下外边框为0，左右两边自动根据父容器的宽度调整为相同的数值把内容卡在中间就可以了。
<style>
.parent{
display: block;
width: 200px;
border: 1px solid;
}
.child{
display: block;
margin: 0 auto;
width: 100px;
height: 50px;
background-color: aqua;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
垂直对齐内容则有挺多办法的，有通过使用设置position:absolute把容器移动到父容器的50%距离上然后上移一半height的，这个通过margin-top设置为负数之类的都可以解决，或者设置display: inline-block;和vertical-align: middle;也可以做到,还有设置position为表样式的，方法很多。
<style>
*{padding: 0;margin:0;}
.box{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div class="box"> </div>
</body>
CSS的水平居中和垂直居中的更多相关文章
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- 【CSS】水平居中和垂直居中
水平居中和垂直居中 2019-11-12 15:35:37 by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...
- css的水平居中和垂直居中总结
Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...
- CSS：水平居中与垂直居中
CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...
- css元素水平居中和垂直居中的方式
关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...
- CSS元素水平居中和垂直居中的方法大全
水平居方法: 1.最熟悉的是给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时 ...
- 在CSS中水平居中和垂直居中：完整的指南
这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...
- css样式水平居中和垂直居中的方法
水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...
- 【CSS】水平居中与垂直居中
有宽度的div水平居中 1.左右margin设为auto即可 .center { width: 960px; margin-left: auto; margin-right: auto; } 2.绝对 ...
随机推荐
- nginx代理 tomcat获得真实用户IP
nginx代理 tomcat获得真实用户IP 2017年04月08日 21:34:17 cf 阅读数 1825更多 分类专栏: nginx html/js/ajax 版权声明:本文为博主原创文章, ...
- [Jenkins]初次访问Jenkins，输入密码后，页面卡在空白界面一直未加载出内容_解决方案
问题描述 安装Jenkins,初次访问Jenkins(http://localhost:8002,端口号根据各自设置而不同,本例是8002),输入Jenkins初始化的管理密码之后,浏览器中一直卡在空 ...
- 面试常考的js题目（三）
1.查找两个节点的最近的一个共同父节点,可以包括节点自身 function commonParentNode(oNode1, oNode2) { if(oNode1.contains(oNode2)) ...
- CAS实现逻辑(JWT)
由于没有获取正规做CAS的流程,这里根据网上的资料,写了一个自己觉得还可以的方案流程,留着备用 名称介绍: token:用于验证请求是否合法 refreshToken:当token失效后,客户端发送t ...
- luogu题解 UVA11992 【Fast Matrix Operations】
题目链接: https://www.luogu.org/problemnew/show/UVA11992 题目大意: 一个r*c的矩阵,一开始元素都是0,然后给你m次三种操作,分别是将一个子矩阵中所有 ...
- Ubuntu 忘记系统登录密码，如何修改密码
Ubuntu 忘记系统登录密码,如何修改密码. 1.重新启动,按ESC键进入Boot Menu,选择recovery mode(一般是第二个选项). 2.在#号提示符下用cat /etc/shadow ...
- O059、Backup Volume 操作
参考https://www.cnblogs.com/CloudMan6/p/5662236.html BackUp是将Volume备份到别的地方(备份设备),将来可以通过restore操作恢复. ...
- O043、计算节点宕机了怎么办
参考https://www.cnblogs.com/CloudMan6/p/5562131.html Rebuild 可以恢复损坏的instance .那如果是宿主机坏了怎么办呢?比如硬件故障或者 ...
- 解决VS2015 不能设置下面的断点**** 断点未能绑定
解决VS2015 不能设置下面的断点**** 断点未能绑定 1. 清理解决方案 , 重新生成解决方案 , 无效!! 2. 选项-- 调试 -- 启用编辑并继续 无效!! 3. 启 ...
- Pr PS 笔记
1. 保存窗口配置 窗口-新建工作区 2. 添加快捷键 编辑-自定义快捷键 3. 添加关键帧,需要下拉轨道 4. 关闭PR声音 5. 视频稳定器 选中素材,右键选择嵌套,嵌套后在子序列把视频画 ...