Home Web Front-end HTML Tutorial CSS 实现垂直居中的几种方案_html/css_WEB-ITnose

CSS 实现垂直居中的几种方案_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

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

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

 

  • 方式一 :table 布局方法
  • 直接上?:
    <!DOCTYPE html><br /><html lang="en"><br /><head><br />    <meta charset="UTF-8"><br />    <title>Title</title><br /></head><br /><body><br /><style><br />    .container{<br />        width: 200px;<br />        height: 200px;<br />        font-weight:bold;">deepskyblue;<br />        display: table;<br />    }<br />    .cell{<br />        display: table-cell;<br />        vertical-align: middle;<br />        font-weight:bold;">lawngreen;<br />    }<br />    .content{<br />        font-weight:bold;">yellow;<br />    }<br /></style><br />    <div class="container"><br />        <div class="cell"><br />            <div class="content"><br />                Content<br />            </div><br />        </div><br />    </div><br /></body><br /></html>
    Copy after login
  • 效果:
  • 分析
  • 优点:content 高度可以动态改变,无须担心父级容器高度不够被截断;
  • 缺点:IE8 还没搞定。  
  • 方式二:布局对象固定高度
  • <!DOCTYPE html><br /><html lang="en"><br /><head><br />    <meta charset="UTF-8"><br />    <title>vertical-center</title><br /></head><br /><body><br />    <style><br />        .container{<br />            width: 200px;<br />            height: 200px;<br />            background-color: #003366;<br />            position: relative;<br />            text-align: center;<br />            display: table;<br />        }<br />        .content{<br />            width:100px;<br />            height: 100px;<br />            background-color: yellow;<br />            position: absolute;<br />            top:50%;<br />            margin-top: -50px;<br />         left:50%;<br />          margin-left:-50px;  <br />        }<br />        .point{<br />            width:50px;<br />            height: 50px;<br />            position: absolute;<br />            top: 50%;<br />            margin-top: -25px;<br />            left:50%;<br />            margin-left:-50px;<br />            background-color: green;<br />        }
    Copy after login
        </style><br /><br />    <div class="container"><br />        <div class="content"><br />            <div class="point"><br />                point goes here.<br />            </div><br />        </div><br />    </div><br /></body><br /></html>
    Copy after login
  • 就这样,我们实现了垂直和水平的居中
  • 上面提到的方法,都有局限性,下面介绍一种通用的方法,不过是 CSS3实现的,但是通用。
  •   
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-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> <div class="center"></div></body></html>
    Copy after login
  • 看吧,我们只是吧 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%);
    Copy after login
  • justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;
    Copy after login

     就先写这么多吧,先吃饭去啦~


  •  

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

    HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

    The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

    HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

    What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

    AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

    Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

    Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

    GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

    How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

    The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

    How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

    To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

    Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Apr 05, 2025 pm 01:03 PM

    The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...

    See all articles