CSS 实现垂直居中的几种方法(必看)

时间:2021-05-08

最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来,等博客搭完写一写 SQL 数据库基础相关的分享,给跟我一样的小白道友们做下参考,大神请直接无视~

说到居中,很多人第一反应应该是水平居中,说到水平居中,肯定道友们有一万种方法做到,CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法,下面是萌萌的分割线。神马?你敢说不萌?

方式一 :table 布局方法

•直接上🐴:

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>Title</title>
  • </head>
  • <body>
  • <style>
  • .container{
  • width:200px;
  • height:200px;
  • font-weight:bold;">deepskyblue;
  • display:table;
  • }
  • .cell{
  • display:table-cell;
  • vertical-align:middle;
  • font-weight:bold;">lawngreen;
  • }
  • .content{
  • font-weight:bold;">yellow;
  • }
  • </style>
  • <divclass="container">
  • <divclass="cell">
  • <divclass="content">
  • Content
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>
  • 效果:

  • •分析

    •优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;

    •缺点:IE8 还没搞定。  

    •方式二:布局对象固定高度

    CSS Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>vertical-center</title>
  • </head>
  • <body>
  • <style>
  • .container{
  • width:200px;
  • height:200px;
  • background-color:#003366;
  • position:relative;
  • text-align:center;
  • display:table;
  • }
  • .content{
  • width:100px;
  • height:100px;
  • background-color:yellow;
  • position:absolute;
  • top:50%;
  • margin-top:-50px;
  •     left:50%;
  •   margin-left:-50px;
  • }
  • .point{
  • width:50px;
  • height:50px;
  • position:absolute;
  • top:50%;
  • margin-top:-25px;
  • left:50%;
  • margin-left:-50px;
  • background-color:green;
  • }
  • </style>
  • <divclass="container">
  • <divclass="content">
  • <divclass="point">
  • pointgoeshere.
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>
  • •就这样,我们实现了垂直和水平的居中

  • 上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。

    XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
  • <head>
  • <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  • <title>haorooms不固定高度div写法</title>
  • <style>
  • .center{
  • position:fixed;
  • top:50%;
  • left:50%;
  • background-color:#000;
  • width:50%;
  • height:50%;
  • -webkit-transform:translateX(-50%)translateY(-50%);
  • }
  • </style>
  • </head>
  • <body>
  • <divclass="center"></div>
  • </body>
  • </html>
  • •看吧,我们只是吧 margin 变成translate,其他浏览器的写法如下:

    -webkit-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);•justify-content:center;//子元素水平居中

    align-items:center;//子元素垂直居中

    display:-webkit-flex; 就先写这么多吧,先吃饭去啦~

    以上这篇CSS 实现垂直居中的几种方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    原文地址:http://www.cnblogs.com/Slim-Shady/archive/2016/06/13/5582324.html

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章