首页 > 其他分享 >css居中(自己常用的)

css居中(自己常用的)

时间:2023-06-27 16:33:31浏览次数:41  
标签:居中 常用 center text top 元素 aligin css

水平居中:

1.text-aligin:center  

如果仅使用 text-aligin:center   是无法达到水平居中的效果的,为什么?

text-aligin:center  需要在行内块元素上使用的,而盒子是块级元素,所以,需要将盒子转换为行内块元素 text-aligin:center  才能生效。

<div style="text-align: center;">

  <div style="display: inline-block;"></div>

</div>

2. display:flex

<div style="display: flex;justify-content: center;">

  <div></div>

</div>

3.position(子元素绝对定位,父元素相对定位)  ,由于子元素有width属性,所以left:50%会导致子元素往右偏,因此需要往左 半个子元素 的宽度 

<div style="position: relative;">

  <div style="position: absolute; left: 50%; margin-left: -100px;"></div>  

</div>

4.margin-auto

<div style="overflow: hidden">

  <div style="margin: auto;"></div>  

</div>

 参考https://blog.csdn.net/qq_53985958/article/details/125510763

 

垂直居中:

1.table-cell

<div style="display: table-cell;vertical-align: middle;">

  <div></div>

</div>

2.display:flex

<div style="display: flex;justify-content:center;align-items:Center;">

  <div></div>

</div>

3. position 子绝对 父相对(与上面一样,要负子元素宽度的一半)

<div style="position:relative;">

  <div style="position: absolute;margin-top:-25px;top:50%"></div>

</div>

参考https://m.php.cn/faq/473645.html

标签:居中,常用,center,text,top,元素,aligin,css
From: https://www.cnblogs.com/luzanzan/p/17509180.html

相关文章

  • js常用操作
    1.重新渲染页面元素this.$forceUpdate(); 2.对象转化为json字符串再传参JSON.stringify()  3.删除js对象元素index表示对象下标deletethis.imgList[index];......
  • docker ubantu 常用操作
    运行容器dockerrun--namenginx-p80:80-dnginx查看容器列表dockercontainerls查看容器列表dockercontainerl停止容器dockerstopnginx-test启动容器dockerstartnginx-test删除容器dockerrmnginx-test容器自启动dockerupdate--restart=alwaysnginx-test ......
  • 【转】网络常用颜文字(文字表情)
    网络常用颜文字:本文纯属从阿林这里截取转帖的部分内容,只是为了使用方便,感谢原作者的收集。【啊啊】w(゚Д゚)w【擦眼泪】(ノへ ̄、)【不屑】( ̄_, ̄)【好耶】ヽ(✿゚▽゚)ノ【棒】(๑•̀ㅂ•́)✧【抽】( ̄ε(# ̄)☆╰╮o( ̄皿 ̄///)【亲】(づ ̄3 ̄)づ╭❤~【汗】Σ(°△°|||)︴【笨】(......
  • git常用命令-远程操作
    [email protected]:..../*.git#将远程代码克隆到本地且项目名称默认为远程项目名称[email protected]:..../*.gitmygit#将远程代码克隆到指定文件夹(mygit)中[email protected]:..../*.gitmygit#将远程代码指定分支......
  • 《深入解析 css》笔记
    第一章:层叠、优先级和继承1.优先级:!important>行内样式>id选择器>类选择器>标签选择器2.两条经验法则:选择器少用id;少用!important。3.使用inherit属性使元素属性继承自父元素,方便修改。4.使用简写属性的时候会默认给细化的属性赋默认值,如标签h1的样式font:32pxarial;默......
  • linux vim常用快捷键
    linuxvim常用快捷键行尾插入:A行首插入:I光标后插入:a光标前插入:i往下插入空行:o往上插入空行:O定位整个文本第一行:gg定位整个文本最后一行:G定位某行:比如定位21行::21或21gg或21G复制整行:yy粘贴:p往下复制3行:3yy复制单个字符:v模式——y复制——p粘贴删除整行:dd往下删......
  • 【Mybatis】常用的标签积累<sql>、<where>等
    一·常用标签组示例: 二、部分标签总结1.sql片段标签<sql>:通过该标签可定义能复用的sql语句片段,在执行sql语句标签中直接引用即可。这样既可以提高编码效率,还能有效简化代码,提高可读性,需要配置的属性:id="">>>表示需要改sql语句片段的唯一标识引用:通过<includerefid=""/......
  • CSS实现根据子元素数量应用不同样式
    在前端的页面布局中经常会出现在子元素个数使用不同的样式的需求,比如文章列表,在较少内容下单列表现,而在元素内容较多时使用双列表现。再比如在页面排版上,可以根据元素内容的多少来修改内容的缩放,位置,颜色等样式:has()选择器简介:has()选择器中的括号传递一个选择器参数,如果选......
  • css颜色变淡和变浅方法收集(模拟sass的darken和lighten函数)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • linux内核常用调优参数
    linux内核常用调优参数1.vm.swappiness:该参数控制系统在内存不足时,内核将页面交换到磁盘的程度。默认值为60,建议值为10-30。2.vm.overcommit_memory:该参数控制系统是否允许超额分配内存。默认值为0,建议值为1。3.vm.dirty_ratio:该参数控制系统脏页占内存的比例。默认值为20,建议......