最全css居中:水平居中+垂直居中+水平/垂直居中总结_style 水平居中-程序员宅基地

技术标签: css  

一.水平居中

1. 行内元素

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center; 
        //看父级是否为块级元素,是则父级设置text-align:center
        //如果不是:父级先设置为块级元素,然后再居中 (即display:block  ;text-align:center;)
       }
</style>
 
<div id="father">
    <span id="son">我是行内元素</span>
</div>

2.块级元素:分宽度是否确定

块级元素宽度确定时:
  • margin: 0 auto;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;
    设置绝对子元素的 margin-left: -元素宽度的一半px;
    或者设置transform: translateX(-50%);
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>
  • 使用flexbox布局实现(宽度定不定都可以)只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HZ___ZH/article/details/109789964

智能推荐

Centos7搭建hadoop的错误(datanode)和(nodeManager)没启动的解决方法_hadoop集群部署时datenode,nodemanger-程序员宅基地

文章浏览阅读3.1k次,点赞4次,收藏14次。1.datanode没有启动,就要到slaves节点去找错误。解决方法:前提是配置文档没错,删除datanode的格式化信息,再重新格式化#注意:在datanode节点上删除[hadoop@node2 ~]$ cd /home/hadoop/dfs/data/current[hadoop@node2 current]$rm VERSION[hadoop@node3 ~]$ cd ..._hadoop集群部署时datenode,nodemanger

安卓-ListView基本使用_使用listview需要下载什么软件吗-程序员宅基地

文章浏览阅读1k次。今天的目标是使用ListView控件完成一个布局,左边一个图标,右边分为上线两部分:标题和内容;ListView在使用时要考虑内存优化,就是使用ViewHolder(自己定义的一个内部类,存储布局中的控件的索引)适配器使用继承自ArrayAdapter的适配器,也可以继承自BaseAdapter(要多写几个方法)目前虽然还有公司在使用,但是后面大家陆续都会转向RecyclerView,_使用listview需要下载什么软件吗

摩斯密码_摩斯密码是通用的吗-程序员宅基地

文章浏览阅读1.6k次。摩斯密码_摩斯密码是通用的吗

物联网架构-程序员宅基地

文章浏览阅读797次,点赞13次,收藏18次。物联网架构。

已安装对应模块,但报无法找到模块“XXX”的声明文件的解决方案_找不到模块“qs”或其相应的类型声明-程序员宅基地

文章浏览阅读1.7k次。在一次做项目的时候,我封装一个axios的文件,想引入qs组件,因为axios已经自带qs组件了,所以直接。好了,工作忙,不吹了,直接在src文件目录下创建一个 shime-vue.d.ts文件,在里面写入。但是,它居然给我报了如下的提示(这张图片是我写博客的时候找的类似的一张图片,当成qs就好)保存,就可以了,qs可以正常引入了,不会再报找不到模块了。_找不到模块“qs”或其相应的类型声明

C# 静态代码块(静态构造函数)_java static块 c#-程序员宅基地

文章浏览阅读1.2w次。本来以为是和java一样写法。结果找了半天也没找到。原来有静态构造函数一样的功能。class SimpleClass{ // Static constructor static SimpleClass() { //... }}静态构造函数具有以下特点:静态构造函数既没有访问修饰符,也没有参数_java static块 c#

随便推点

Web安全工具大集合-程序员宅基地

文章浏览阅读4.3k次。Test sites / testing groundsSPI Dynamics (live) – http://zero.webappsecurity.com/Cenzic (live) – http://crackme.cenzic.com/Watchfire (live) – http://demo.testfire.net/Acunetix (live) – http:

MySQL开发技巧 - 分页和索引_本关任务:能分页读取表中数据,针对大数据量进行简单优化。-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏3次。第1关:MySQL 分页查询本关任务:能分页读取表中数据,针对大数据量进行简单优化。USE Products;#请在此处添加实现代码########## Begin ###########1.分页查询select prod_id from products limit 5,5;#2.用子查询优化分页查询语句select prod_id from products where prod_id >=(select prod_id from products limit 10,1) l_本关任务:能分页读取表中数据,针对大数据量进行简单优化。

WPF 控件专题 Image控件详解_wpf image-程序员宅基地

文章浏览阅读5.3k次。WPF 控件专题 Image控件详解_wpf image

OMPL库学习笔记0--写在前面_ompl time-程序员宅基地

文章浏览阅读2.7k次。 从今天开始学习OMPL库函数,自己是一个没有恒心的人,而OMPL库又实在比较庞大,这算是写在前面的自我鼓励吧。记录这些学习笔记是自我加深认识的一个过程,肯定存在许多错误,希望有看到错误的小伙伴可以不吝指教,也希望可以和大家多多交流,相互学习。 在了解OMPL库之前还有一步是必须的,那就是下载OMPL库,就像我们看一本书,你总得先有这本书吧 我自己在网上找了一..._ompl time

PMP之项目风险管理---实施定量风险分析_pmp敏感性分析-程序员宅基地

文章浏览阅读2.3k次。1. 气泡图_pmp敏感性分析

时序分析的基本概念和术语-程序员宅基地

文章浏览阅读3.4k次,点赞11次,收藏45次。一、发起沿和捕获沿发起沿:数据发送的时钟沿叫发起沿。捕获沿:数据接收的时钟沿叫捕获沿。发起沿和捕获沿之间一般情况下相差一个时钟周期。二、四种时序路径模型1.外部输入端口到内部寄存器的路径。2.内部寄存器之间的时序路径。3.内部寄存器到外部端口的时序路径。4.输入到输出的组合路径。上述四种时序路径的起点和终点start end point1.Device A/clk rega/D2.rega/clk regb/D_时序

推荐文章

热门文章

相关标签