css不同情况下的各种居中方法

div水平居中
1.行内元素
.parent{
text-align: center
}
2.块级元素
.son{
margin: 0 auto ;
}
3.flex布局
.parent{
display: flex;
justify-content: center
}
4.绝对定位-定宽
.son{
position: absolute;
width: 宽度
left: 50%
margin-left : -0.5 * 宽度
}
5.绝对定位-不定宽
.son {
position : absolute;
left : 50%;
transform : translate( -50%,0 )
}

  1. left/right : 0
    .son {
    position: absolute;
    width : 宽度;
    left : 0
    right: 0
    margin: 0 auto;
    }

div垂直居中
1.行内元素
.parent {
height : 高度
}
.son {
line-height : 高度
}
2.table
.parent {
display: table;
}
3.flex
.parent {
display: flex;
align-items: center;
}
4.绝对定位-定高
.son{
position:absolute
top:50%
height: 高度
margin-top: -0.5高度
}
5.绝对定位-不定高
.son{
position: absolute
top: 50%
transform: translate( 0 ,50%)
}
6.top/bottom: 0
.son{
position:absolute;
height: 高度
top:0
bottom: 0
margin : auto 0
}

原文地址:https://www.cnblogs.com/vancissell/p/12084254.html

时间: 2024-11-05 18:46:27

css不同情况下的各种居中方法的相关文章

web设计_7_页面缺失图片或CSS的情况下仍然易读

1. 在任何可能使用背景图片的地方应设置同样的颜色的背景色. 防止图片不能加载的情况下,页面内容同样保持较好可读性. 例如文字为白色,背景图为深色,如果不设置背景色,当背景图未成功加载, 而浏览器多数默认背景为白色,那么这是文字内容无法可读. 2.当禁用CSS样式后,web仍然能够呈现很好地内容页面. 需要能够较好的保证页面核心内容与样式很好的分离.做到清晰易读的结构代码. 利用firebug等工具可进行实施观察,修改和调试. 3.利用W3C的HTML代码验证器 http://validator

不改变代码情况下,让列表增加方法

原代码 v = [ [11,22], # 每个都有一个append方法 [22,33], # 每个都有一个append方法 [33,44], # 每个都有一个append方法 ] # 不修改下面这段代码情况下,让每个列表有一个append方法 for item in v: print(item.append) 修改后代码 class Foo(object): def __init__(self,data): self.row = data def append(self,item): self.

css:子元素div 上下左右居中方法总结

最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案:  { position:fixed;  left:0; right:0; top:0; bottom:0; margin:auto; } 备注:此处小编使用position:fixed为最佳方案,因为position:fix

css控制div下图片自适应解决方法:图片不超过最大宽度

我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量. 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐.还有一种是在外部容器定义over-flow:hidden.但这种办法只会切割图片而不会自动适用. 下面的办法的出现应该感谢伟大的c

css中常用的几种居中方法

1:使用position:absolute,设置left.top.margin-left.margin-top的属性 position:absolute; width:200px; height:200px; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:red; 2:使用position:fixed,同样设置left.top.margin-left.margin-top的属性 position:fixe

linux在不关机情况下新增硬盘的方法

开机状态插入硬盘 不关机执行命令 echo "- - -" > /sys/class/scsi_host/host0/scan 注意 echo "- - -" - 中间有空格 fdisk -l 或者 lsblk 查看是否查找到新增的硬盘 如果没有生效,尝试把 host0 替换成 host1 或者 host2 等尝试 发现硬盘fdisk分区使用或者加入lvm 注: 本方法在 centos 7.5 下经过测试有效,其他linux系统未知 原文地址:https://

vs2008 "不安全代码只会在使用 /unsafe 编译的情况下出现"的解决方法

原因是:在编译的代码里面有不安全类型unsafe方法或类! 解决方法:将项目的“可编译不安全代码”属性设置为true就可以了,方法如下:项目属性对话框->配置属性->生成->允许不安全代码块 设为\"true\".如图:

css 元素居中方法

目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: 1 <div class="nav-content"> 2 <ul ng-click="navItem($event)" ng-model="navType"> 3 <li id="nav_msglist"> 4 <a href="#/">消息列表</a> 5

sqlserver修改sa密码(在windows登陆没有权限的情况下)

对于windows用户没有权限执行alter login sa enable的情况下,采用如下方法可以成功修改sa密码登陆.1. 用Run as a administrator打开命令提示符里输入NET STOP MSSQLSERVER, 即停止MSSQLSERVER运行.2. 在命令提示符里输入 NET START MSSQLSERVER /m, 将SQL Server 2008 启动为单用户模式.3. 用Administrator账号登录SQL Server 2008.4. SQL Serv