zoukankan      html  css  js  c++  java
  • DIV垂直居中 (转)

     

    第一种方法:

     1<style type="text/css">
     2<!--
     3#middle
     4{
     5       background:blue;
     6       position:absolute;
     7       left:expression((body.clientWidth-50)/2 + "px");
     8       top:expression((body.clientHeight-50)/2 + "px");
     9       width:50px;
    10       height:50px;
    11}

    12-->
    13
    </style>
    14<div id="middle"  align="absmiddle"></div> <!--absmiddle 图像的中间与同一行中最大元素的中间对齐。
    15-->

    说明:这段代码没有文档类型和命名空间的申明,我已试过,如果加上,蓝色方快儿将位于顶部且一部分被浏览器隐藏,大家可以试试!此外,FF不支持expression

    第二种方法:

     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2<html xmlns="http://www.w3.org/1999/xhtml">
     3<head>
     4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     5<title>DIV垂直居中</title>
     6<style type="text/css">
     7#menu
     8{
     9       position: absolute;
    10       top: 50%;
    11       left: 50%;
    12       margin-top: -25px;
    13       margin-left: -150px;
    14       color:blue;
    15       width: 300px;
    16       height: 50px;
    17       border:solid 1px gray;
    18}

    19
    </style>
    20</head>
    21<body>
    22<div id=menu>页面水平垂直居中</div>
    23</body>
    24</html>

    第三种方法:

     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2<html xmlns="http://www.w3.org/1999/xhtml">
     3<head>
     4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     5<title>DIV垂直居中</title>
     6<style type="text/css">
     7#menu
     8{
     9       position: absolute;
    10       top: 50%;
    11       left: 50%;
    12       margin-top: -25px;
    13       margin-left: -150px;
    14       color:blue;
    15       width: 300px;
    16       height: 50px;
    17       font-weight:bold;
    18       border:solid 1px gray;
    19       line-height:50px;
    20       font-size:20px; 
    21       text-align:center;
    22}

    23
    </style>
    24</head>
    25<body>
    26<div id=menu>页面水平垂直居中</div>
    27</body>
    28</html>
  • 相关阅读:
    用PHP如何打造一个高可用高性能的网站
    php 数据批量插入mysql和mysql类
    PHP8新特性
    php 爬取抖音评论数据
    Python学习笔记之7.5
    mysql基本概念
    开发google插件
    php curl 重定向 cookie问题
    git 入门
    git对已经提交过的文件添加到.gitignore
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1520668.html
Copyright © 2011-2022 走看看