居中布局
水平居中
<><div className='cls001'>01factory</div><style jsx>{`.cls001{background: blue;display: flex;justify-content: center;}`}</style></>
01factory
如果封装成一个组件的话,可以参考以下代码:
import { ReactNode } from 'react'; export default function Panel({ children }: { children: ReactNode; }){ return <> <div className='cls001'> {children} </div> <style jsx>{` .cls001{ display: flex; justify-content: center; } `}</style> </> }
垂直居中
<><div className='cls002'>01factory</div><style jsx>{`.cls002{height: 10rem;background: blue;display: flex;flex-direction: column;justify-content: center;}`}</style></>
01factory
如果封装成一个组件的话,可以参考以下代码:
import { ReactNode } from 'react'; export default function Panel({ children }: { children: ReactNode; }){ return <> <div className='cls001'> {children} </div> <style jsx>{` .cls001{ display: flex; justify-content: center; flex-direction: column; } `}</style> </> }
水平垂直居中
<><div className='cls003'><div className='cls004'>01factory</div></div><style jsx>{`.cls003{height: 10rem;background: blue;display: flex;flex-direction: row;justify-content: center;}.cls004{display: flex;flex-direction: column;justify-content: center;}`}</style></>
01factory
如果封装成一个组件的话,可以参考以下代码:
import { ReactNode } from 'react'; export default function Panel({ children }: { children: ReactNode; }){ return <> <div className='cls001'> <div className='cls002'> {children} </div> </div> <style jsx>{` .cls001{ display: flex; justify-content: center; flex-direction: row; } .cls002{ display: flex; justify-content: center; flex-direction: column; } `}</style> </> }