✨
HTML 網頁設計
  • HTML 簡介
  • 1.網站三兄弟
    • 環境設定
    • HTML 基本結構
      • 文件架構
      • 元素
      • 文章-使用的元素
      • 超連結
      • Form表單
      • 嵌入第三方服務
    • Css 基本使用
      • 使用方式 Background
        • before、after
      • Box-sizing 介紹
      • Reset Css
      • CSS - 排版
        • CSS - 定位器
        • 導覽列篇
        • 置中篇 - 範例
        • 三欄式 - 範例
        • 兩欄式
      • css命名規則
    • JS 基本使用
      • 基本語法
      • 參數/arguments
      • param() 方法
      • 定時器(timer)
  • 2.css 進階使用
    • Display
    • Position
      • z-index and stacking context
      • Table
    • CSS選擇器
  • 3.其他JS工具
    • jQuery 簡介
      • $.cookie()
      • .animate
      • scrollTop
      • 使用效果
    • BootStrap
    • NODE.JS
      • 安裝 Node.js
        • SVG - 可縮放向量圖形
      • webpack
    • React
      • React Native
  • 4.曲線圖
    • Chart 前端操作
      • Datasets Style
      • Line 設定
  • 4.DataTable
    • Bootstrap Table
  • 99.其他內容
    • Webpack
    • IIS - 網際網路資訊服務
      • 環境設定
      • WEB IIS架站
Powered by GitBook
On this page
  • 範例1、Display - Flex
  • 範例2、Display - Grid
  • 範例2-1
  • 範例2-2
  • 範例3position -relative
  • 範例3-1
  • 範例3-2

Was this helpful?

  1. 1.網站三兄弟
  2. Css 基本使用
  3. CSS - 排版

置中篇 - 範例

這篇主要簡單帶過幾種置中的方式:

範例1、Display - Flex

    <div class="main">
        <div class="box"></div>
    </div>
        *,*::after,*::before
        {

            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            position: relative;
            height: 100vh;
            background-color: #555;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            position: relative;
            height: 200px;
            width: 200px;

            background-color: plum;
        }

範例2、Display - Grid

    <div class="main">
        <div class="box"></div>
    </div>
        *,*::after,*::before
        {

            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            position: relative;
            height: 100vh;
            background-color: #555;
            display: grid;

        }
        .box{
            position: relative;
            height: 200px;
            width: 200px;
            justify-self: center;
            align-self: center;
            background-color: plum;
        }

範例2-1

    <div class="main">
        <div class="box"></div>
    </div>
        *,*::after,*::before
        {

            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            position: relative;
            height: 100vh;
            background-color: #555;
            display: grid;
        }
        .box{
            position: relative;
            height: 200px;
            width: 200px;
            margin: auto;
            background-color: plum;
        }

範例2-2

    <div class="main">
        <div class="box"></div>
    </div>
        *,*::after,*::before
        {

            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            position: relative;
            height: 100vh;
            background-color: #555;
            display: grid;
        }
        .box{
            position: relative;
            height: 200px;
            width: 200px;
            margin: auto;
            background-color: plum;
        }

範例3position -relative

    <div class="wrap">
        <div class="box"></div>
    </div>
        body {
            margin: 0;
            padding: 0;
            background-color: #555;
        }

        .wrap {
            position: relative;
            width: 1200px;
            height: 100vh;
            margin-left: auto;
            margin-right: auto;
            background-color: #aaa;
        }

        .box {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: #fff;

        }

範例3-1

    <div class="wrap">
        <div class="box"></div>
    </div>
        body {
            margin: 0;
            padding: 0;
            background-color: #555;
        }

        .wrap {
            position: relative;
            width: 1200px;
            height: 100vh;
            margin-left: auto;
            margin-right: auto;
            background-color: #aaa;
        }

        .box {
            position: fixed;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: #fff;
        }

範例3-2

    <div class="main">
        <div class="box"></div>
    </div>
        *,*::after,*::before
        {
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            position: relative;
            height: 100vh;
            background-color: #555;
        }
        .box{
            position: relative;
            height: 200px;
            width: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: plum;
        }
Previous導覽列篇Next三欄式 - 範例

Last updated 4 years ago

Was this helpful?