如何将我的代码放在页面/窗口的正中间？

时间：2018-01-04 04:00:08

标签： html css

我正在制作一个非常简单的网页，但我需要帮助将其定位在中心。我该如何纵向和横向对中呢？我在这里尝试过其他几个帖子，但似乎都没有用，所以如果有些人可以根据我的具体代码帮助我，那就太好了。

我提供了以下HTML：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
  font-family: 'Dosis';
}
</style>
</head>
<body>
   <div style="text-align: center; font-size:16px; text-transform: uppercase;">
     example.IO
   <br>
   USA
   <br><br>
   example &amp; example
   <br>
   coming soon 2018
   <br><br>
   <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
   <br><br>
   <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
   <br>
   <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
   <br>
   <br>
  </div>
</html>

5 个答案:

答案 0 :(得分：1)

试试吧

body > div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

答案 1 :(得分：0)

给你的主要div一个类名，并使用绝对位置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  
</head>
<body>
      <table id="tblExample" border="1px" cellpadding="2" cellspacing="2" style="border-collapse:collapse;">
    <thead>
        <tr><th>Group</th><th>Sub Group</th><th>Details</th></tr>
    </thead>
    <tbody>
        <tr><td>Group#1</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
        <tr><td>Group#1</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
        <tr><td>Group#1</td><td>Sub-Group#3</td><td>Some description here.........</td></tr>
        <tr><td>Group#2</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
        <tr><td>Group#2</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
        <tr><td>Group#3</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
        <tr><td>Group#4</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
        <tr><td>Group#4</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
        <tr><td>Group#4</td><td>Sub-Group#3</td><td>Some description here.........</td></tr>
        <tr><td>Group#5</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function () {	
        $('#tblExample').each(function () {
            var Column_number_to_Merge = 1;
 
            // Previous_TD holds the first instance of same td. Initially first TD=null.
            var Previous_TD = null;
            var i = 1;
            $("tbody",this).find('tr').each(function () {
                // find the correct td of the correct column
                // we are considering the table column 1, You can apply on any table column
                var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');
                 
                if (Previous_TD == null) {
                    // for first row
                    Previous_TD = Current_td;
                    i = 1;
                } 
                else if (Current_td.text() == Previous_TD.text()) {
                    // the current td is identical to the previous row td
                    // remove the current td
                    Current_td.remove();
                    // increment the rowspan attribute of the first row td instance
                    Previous_TD.attr('rowspan', i + 1);
                    i = i + 1;
                } 
                else {
                    // means new value found in current td. So initialize counter variable i
                    Previous_TD = Current_td;
                    i = 1;
                }
            });
        });		
    });
</script>
</body>
</html>
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

答案 2 :(得分：0)

要使块元素（如）水平居中，请使用margin: auto; 

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

＆＃13;
＆＃13; 
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
＆＃13; 
<head>
  <meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <style>
    body {
      font-family: 'Dosis';
    }
  </style>
</head>

<body>
  <div class="center" style="text-align: center; font-size:16px; text-transform: uppercase;">
    example.IO
    <br> USA
    <br><br> example &amp; example
    <br> coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

css 

.outer-box {
 height: 100vh;
 dispaly: flex;
 width: 100%;
 justify-content: space-around;
}
.inner-box {
 display: block;
 position : relative;
 width: auto;
}

html 

<div class="outer-box">
    <div class="inner-box" style="text-align: center; font-size:16px; text-transform: uppercase;">
        example.IO
        <br> USA
        <br><br> example &amp; example
        <br> coming soon 2018
        <br><br>
        <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
        <br><br>
        <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
        <br>
        <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
        <br>
        <br>
      </div>
</div>

答案 4 :(得分：0)

考虑使用flexbox来控制您的居中。 

<body>
  <div class="content">
    example.IO
    <br>
    USA
    <br><br>
    example &amp; example
    <br>
    coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>
</body>

然后css与上面HTML中引用的.content类名称相关联：

body {
  min-height: 100vh;
  margin: 0;
}

.content {
  text-align: center; 
  font-size:16px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
相关问题
最新问题