CSS水平居中的9种方法

2023-01-02 22:42:08来源：网络转载作者：匿名 阅读量：142 字体：大 中 小

容器的居中显示在网页设计中是很常见的，居中显示可以获得视觉的焦点，是内容更加突出，下面就简单的说明一下如何在HTML中通过样式的控制来实现

CSS水平居中的9种方法

01、最常见的一种，代码示例如下图，首先，取big一半像素大小赋给small层，通过margin: 0 auto; text-align: center来实现

02、第二种方法，代码示例如下图，将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2，也就是125即可

03、第三种方法，代码示例如下图，将big层的position设置为absolute，然后small层的margin-left取（500-250）/2，也就是125即可

04、第四种方法，通过display:flex实现，代码示例如下图，big层display:flex;flex-direction:column;而small层align-self:center

05、第五种方法，在small层的宽度没有的时候，可以通过width:fit-content这个设置来完成，代码示例如下

06、第六种方法，通过display:inline-block来实现，将这个设置赋给big层即可，代码示例如下图

07、第七种方法，设置big层position:relative，相对情况下，使small层左浮动，代码示例如下

08、第八种方法，transform属性，代码示例如下

09、第九种方法，借助第三方样式，比如增加一个add节点，水平浮动向左，使small层随之浮动，代码示例如下

特别提示

每种方法都适应不同的运行环境，实际操作时需要考虑不同浏览器的解析时的兼容性

免责声明：

本文《CSS水平居中的9种方法》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 怎样修改iTunes备份目录路径释放C盘空间

    怎样修改iTunes备份目录路径释放C盘空间

    电脑01、首先需要删除你的原始备份文件夹，在C盘依次打开C:UsersLS（每人不一样，为你的用户名）AppDataRoamingApple Computer，然后删除MobileSync文件夹 0...

    阅读: 642

  • 怎么设置一台电脑两台显示器两个屏幕

    怎么设置一台电脑两台显示器两个屏幕

    笔记本电脑 VGA或者HDMI数据线01、电脑可以分屏对于很多编程学习爱好者来说有着不少的妙用，可以左边的屏幕看视频学习，右边的实例操作。 02、我们首先需要知道我们的笔记本电脑的外接数据线的...

    阅读: 629

  • 怎样用光盘重装联想电脑系统

    怎样用光盘重装联想电脑系统

    联想笔记本电脑带光驱 光盘（电脑系统） 01、首先电脑开机放入光盘，重启电脑时多次按动F12键打开启动菜单并选择DVD选项，按回车键确认 02、进入光盘系统安装菜单后，按 1 键，安装系统到第一...

    阅读: 636

  • 如何解决winxp开机后不显示桌面

    如何解决winxp开机后不显示桌面

    01、不显示桌面，是由于explorer.exe进程没有正常启动，我们可以手动打开这个进程。同时按键盘上的ctrl+alt+del键 02、按了后，会弹出任务管理器，我们点击管理器菜单上的‘文件’ ...

    阅读: 594

  • 新手如何利用模板做出好看的PPT？

    新手如何利用模板做出好看的PPT？

    PowerPoint 2016版本 PPT模板网址：http://www.1ppt.com/ 01、首先，我们先利用网址：http://www.1ppt.com/找到第一PPT的网站，这个网站...

    阅读: 569

  • 电脑开机提示press any key to restart怎么办

    电脑开机提示press any key to restart怎么办

    电脑 光盘（系统安装）01、电脑硬盘损坏这种情况属于硬件的损坏，建议大家将电脑送到指定维修点维修或者更换系统硬盘 02、电脑系统损坏系统损坏最直接的方式为系统重装，具体方式如下 03、首先购买系统...

    阅读: 592

  • Office2016是否激活，Office2016是否永久激活

    Office2016是否激活，Office2016是否永久激活

    电脑 Office 201601、任意打开office 2016的某一个组件，我打开的是excel，如下图 02、如果office未激活，页面将会出现提示，具体如下图： 03、其次，另外一个...

    阅读: 597

  • 如何设置2345影视大全离线缓存路径？

    如何设置2345影视大全离线缓存路径？

    影视大全01、首先下载安装好之后，我们打开这个软件。 02、在首页上找到右下角的“我”的标志，点击进入。 03、在这里我们可以看到设置的选线，咱们点进去。 04、然后就看到更改缓存路径的标志了，...

    阅读: 659

  • 怎样更改视频的分辨率

    怎样更改视频的分辨率

    电脑 爱剪辑（软件）01、首先打开搜狗浏览器，搜索 爱剪辑 ，选择下载并安装 02、安装完成之后，回到桌面，找到爱剪辑图标选择并启动 03、软件启动完成后点击应用左侧的 添加视频 选项，添加需要更...

    阅读: 560

  • win10里如何在中文输入法里添加美国键盘

    win10里如何在中文输入法里添加美国键盘

    01、找到系统栏中的语言栏，点击鼠标右键，在弹出菜单中选择设置； 02、可以在这里看到已经添加的输入法，选择添加，可以新增； 03、勾选上美国键盘，然后选择确认，这就可以了，而且这里还有很多其他的...

    阅读: 581

更多排行榜

热门文章

最近更新