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>
  • 相关阅读:
    MySQL Binlog信息查看
    MySQL Binlog和Relaylog生成和清理
    MySQL Binlogbinlog_format参数
    Maven的核心概念及安装
    Maven工程约定目录结构
    解决 internal/modules/cjs/loader.js:983 throw err; ^ Error: Cannot find module ‘express‘ 报错问题
    Linux之开机、重启和用户登录注销等操作
    Linux之系统文件概述
    Linux之基本指令
    express的基本使用
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1520668.html
Copyright © 2011-2022 走看看